Переписаний та покращений текст:
Як машина навчилася грати в “найди клоуна”: Мій досвід з Playwright та автоматизацією браузера
За роки роботи в сфері автоматизації та аналізу даних я бачив багато змін, але останні досягнення в області автоматизації браузера, зокрема з використанням штучного інтелекту, захоплюють навіть мене. Автоматизація браузера – це не просто модний тренд, а потужний інструмент, який здатний трансформувати практично будь-який аспект нашої цифрової взаємодії. У цій статті я поділюся власним досвідом роботи з Cloud Code та Playwright CLI, розкажу про реальні кейси використання та продемонструю, як машина може навчитися тестувати себе, знаходити помилки та навіть їх виправляти.
Мене звати Ліла Харт, і я, як експерт з багаторічним досвідом, спостерігала, як автоматизація еволюціонує від простих скриптів до складних, інтелектуальних систем. І я радий поділитися з вами своїми знаннями.
Розділ 1: Автоматизація браузера: Від простої автоматизації до розумних систем
Уявіть собі цифрового помічника, який не тільки виконує ваші завдання, але й постійно вчиться, самостійно адаптується та покращує свою роботу. Cloud Code та Playwright CLI – це саме ті інструменти, які роблять цю фантазію реальністю.
Cloud Code виступає в ролі диригента, який керує процесами та організовує роботу. Playwright CLI, в свою чергу, є потужним інструментом, що дозволяє взаємодіяти з браузером, натискати кнопки, заповнювати форми та виконувати інші дії.
Я з власного досвіду знаю, що поєднання цих інструментів відкриває безмежні можливості. Від стрес-тестування веб-додатків до автоматичного збору даних та навіть гри в прості ігри – все це стає реальністю. Особисто я часто використовую Playwright для тестування нових функцій, збору даних з веб-сайтів та автоматизації рутинних завдань, що значно підвищує мою продуктивність.
Цікаво знати:
Cloud Code – платформа для розробки та розгортання хмарних додатків, яка оптимізує роботу з хмарними технологіями. Playwright CLI – інструмент від Microsoft, який дозволяє автоматизувати взаємодію з браузером. Разом вони формують потужний дует для вирішення різноманітних завдань.
У цій статті я продемонструю, як використати Playwright CLI з Cloud Code для вирішення наступних завдань:
- Тестування веб-додатку та виявлення помилок: Покажу, як машина може самостійно знаходити та виправляти помилки.
- Автоматичний пошук стоматологів: Я покажу, як автоматизувати збір контактної інформації.
- Використання логін-сесій: Продемонструю, як працювати з автоматизацією в умовах необхідності авторизації.
Розділ 2: Швидкий старт: Встановлення Playwright CLI та перший скріншот
Почнемо з чистого аркуша – нового проєкту в Cloud Code, який я назвав browser-automation-demo.
Перший крок – встановити Playwright CLI. Звичайно, можна це зробити вручну, але я віддаю перевагу підходу, де Cloud Code автоматично керує процесом.
Мій досвід включає процес: Необхідно проаналізувати всі доступні інструменти, оцінити їх переваги та недоліки, щоб вибрати оптимальне рішення. Спочатку я експериментував з Chrome DevTools, але Playwright CLI зацікавив мене своєю гнучкістю та функціональністю. Зокрема, мені сподобалося, як легко можна отримати доступ до різних інструментів за допомогою команди /context.
Після встановлення Cloud Code автоматично ініціалізував проєкт, встановив Playwright CLI та запустив тестовий скрипт. Скрипт відкрив веб-сторінку, зробив скріншот та зберіг його. Це вже було першим успіхом, який свідчив про працездатність системи.
Тепер, коли все налаштовано, я ініціалізував середовище, щоб створити файли.
Розділ 3: Автоматизоване тестування: Як машина вчиться сама
Автоматизація браузера відкриває безліч можливостей, включаючи автоматизоване тестування. Замість того, щоб витрачати час на ручне тестування, можна дозволити машині робити це за вас.
Я особисто використовую цей підхід для тестування власних веб-додатків. В одному з моїх проєктів я створив багатосторінкову форму з вісьмома запитаннями. Моя мета полягала в тому, щоб автоматизувати процес тестування, виявити можливі помилки та переконатися, що все працює правильно.
Перейшовши в режим планування, я отримав такий план: створити сайт для надсилання форм. Основна вимога полягала в тому, що кожне питання повинно знаходитися на окремій сторінці. Перехід до кожної сторінки форми, включаючи відображення прогресу виконання, був ключовим для правильного тестування.
Розділ 4: Скріншоти як доказ роботи
Після завершення процесу створення з’явилось декілька файлів та відбувся запуск серверу на локальному хості. Цікавим фактом стало те, що система автоматично створила скріншоти сторінок форми, хоча я навіть не просив про це. Це свідчило про те, що машина вже почала виконувати тестування.
Перша сторінка містила питання “Як ваше ім’я?”, друга “Прізвище”. Наступні сторінки містили інші питання, а також індикатор прогресу.
Для одного запиту, що я зробив, і автоматичної генерації скріншотів, я був вражений.
Повернувшись до режиму планування, я попросив систему запустити сервер та протестувати його. Я хотів, щоб система використала функції браузера для тестування, заповнила поля, натискала кнопки та, у разі виявлення помилок, фіксувала їх, щоб я міг виправити сайт. Також просив систему запускати процес у баченому браузері, щоб я міг спостерігати за виконанням.
За замовчуванням, у Cloud Code можна автоматично запускати Playwright у баченому або безголовому режимі. Залежно від потреб, можна вибрати режим.
Розділ 5: Боротьба з помилками: Знаходження та виправлення
Результат QA-тестування вражав: машина самостійно виявляла помилки та навіть пропонувала шляхи їх виправлення.
Скрипт qa-test.js керував процесом тестування. Я спостерігав за процесом у реальному часі.
У вікні браузера система вводила дані, клікала по кнопках, переходила між сторінками форми. У якийсь момент виникли проблеми, і сайт почав “глючити”.
Система зафіксувала помилки.
Результат: помилки, які система виявила:
- UI виглядав елегантно
- При введенні тексту в текстове поле система не переходила на сторінку перегляду
- Сторінка перегляду не завантажувалась
Використовуючи цю інформацію, система автоматично виправила баги! Це дійсно вражаюче. Автоматизація QA дозволяє виявляти і виправляти помилки, що значно покращує якість продукту.
Система сама запустила сервер та повторно запустила тест, фактично увійшовши у безперервний цикл тестування та валідації. Це неймовірно.
Успішне проходження другого тесту було результатом!
Розділ 6: Пошук стоматологів та їх контактів: Детективна робота
Розглянемо ще один приклад: використання автоматизації для збору контактної інформації стоматологічних клінік. Я попросив систему знайти стоматологів у Каліфорнії та зібрати їхні номери телефонів.
План роботи: створити скрипт Playwright, який автоматизує пошук у Google стоматологічних клінік у Каліфорнії. Запустити браузер, здійснити пошук, зібрати посилання, відвідати кожний сайт та вивести інформацію.
Спочатку система використала Google, але зіткнулася з блокуванням автоматизації. Тоді вона автоматично переключилась на DuckDuckGo, що продемонструвало її здатність до адаптації та навчання.
За досить короткий час система знайшла п’ять номерів телефонів стоматологічних клінік. Це чудовий приклад того, як машина може навчатися в процесі роботи. Крім того, я помітив, як вона самостійно переходила на сторінку контактів, навіть якщо номер телефону був доступний на головній сторінці.
Розділ 7: Автоматизація в логін-сесіях: браузер “закоханий”
Наступний крок – автоматизація в умовах необхідності авторизації.
Я обрав підхід використання постійного профілю браузера, щоб уникнути необхідності щоразу вводити логін та пароль.
План: увійти в мій акаунт Skool, перейти до каналу “Wins”, ставити лайки під постами.
Розділ 8: Від лайків до розуміння: навчання триває
Перший запуск не був ідеальним – системі знадобилося кілька ітерацій, щоб коректно виконувати поставлене завдання.
Система відкривала та закривала браузер. Врешті-решт, я переконався, що система авторизувалась.
Система лайкала та відміняла лайки. Важливо пам’ятати, що процес автоматизації – це постійний процес вдосконалення. Удосконалення скриптів та навчання системи – це ключ до успіху.
Система також “лайкала занадто швидко”. Після кожної ітерації система вдосконалювалась.
Після цього система сортувала пости за новизною та лайкала їх без помилок.
Розділ 9: Агент, який працює автономно: Автоматизація на jadwal
Тепер я створив власного “AI Agent” в Skool, який самостійно взаємодіє зі спільнотою.
Агент публікує щоденні зведення, відповідає на сповіщення та навіть вітає мене з днем народження.
Автономна робота агента базується на використанні “навичок”, які постійно удосконалюються завдяки невпинному навчанню.
Кожного разу, стикаючись з новими завданнями, агент вдосконалює свої “навички” або створює нові скрипти.
Розділ 10: Від списку до дій: як агент виконує завдання
Агент створює список завдань, а потім самостійно їх виконує.
Система заходить на сайт та коментує сповіщення.
Звичайно, цей процес не ідеальний, але постійне покращення скриптів та навчання системи – це ключ до успіху.
Ми використовуємо Playwright CLI, оскільки цей інструмент має оптимальний баланс продуктивності та ефективності використання ресурсів.
Я продовжую тестувати інші варіанти та вивчати їх переваги.
Висновок: Ваш цифровий помічник чекає
Автоматизація браузера – це потужний інструмент, який здатний змінити наше ставлення до багатьох завдань.
Технології постійно розвиваються, і незабаром машина візьме на себе виконання ще більшої кількості рутинних та складних завдань.
Не бійтеся експериментувати. Світ автоматизації відкритий для вас – зробіть перший крок!
