Сучасні інструменти тестування: GIT, WebDriver IO, Puppeteer

💡 Усі статті, обговорення, новини про тестування — в одному місці. Приєднуйтесь до QA спільноти!

Привіт! Мене звати Олег, я Senior QA Engineer у компанії GlobalLogic. За п’ять років у тестуваннs та три роки в команді я займався як Manual QA, так і QA Automation. Пропоную розглянути одну з важливих складових сучасних підходів до тестування — його інтеграцію у безперервний цикл розробки (CI/CD), що дає змогу автоматично перевіряти та розгортати зміни в коді без втрати часу.

У цьому циклі статей я проаналізую популярні інструменти та технології, які сьогодні використовуються для автоматизації та тестування. Це допоможе краще зрозуміти, як організувати цей процес ефективно, забезпечуючи високу якість на кожному етапі розробки продукту.

У сучасній розробці вебзастосунків тестування та автоматизація є невід’ємними елементами процесу створення якісних і стабільних продуктів. Кожен етап розробки від написання коду до його розгортання потребує ретельного контролю, щоб уникнути помилок, багів та забезпечити стабільну роботу застосунку в реальних умовах.

Автоматизоване тестування значно прискорює цей процес, мінімізуючи людський фактор та підвищуючи ефективність розробки. Розглянемо детальніше інструменти тестування:

• у першій статті зупинимось на GIT, WebDriver IO та Puppeteer;
• у другій статті — JavaScript для тестування, Supertest та Jest/Mocha, інтеграції всіх інструментів у CI/CD процес та підібʼємо підсумки.

GIT: Система контролю версій

GIT — це одна з найпопулярніших розподілених систем контролю версій, яка широко використовується розробниками програмного забезпечення у всьому світі. Вона дозволяє ефективно організовувати командну роботу, контролювати зміни в проєкті та зберігати історію розробки. Завдяки GIT можна легко повернутися до попередньої версії коду, інтегрувати зміни з різних гілок і слідкувати за правками, внесеними кожним членом команди.

Як GIT допомагає організовувати командну роботу

• Розподіленість: GIT дає змогу кожному працювати автономно без постійного підключення до центрального репозиторію. Всі зміни зберігаються локально, що забезпечує високу швидкість роботи.
• Історія змін: кожен коміт фіксує зміни з детальним повідомленням про те, що було змінено. Це допомагає відстежувати історію проєкту та бачити, хто і коли вніс ті чи інші правки.
• Гілки: робота з гілками дає можливість паралельно розробляти різні функції без конфліктів. Наприклад, одна гілка може бути призначена для виправлення помилок, інша — для розробки нових функцій, а основна — для стабільної версії проєкту.
• Можливість повернення: завдяки GIT можна легко повернутися до попередньої версії проєкту, якщо нові зміни виявилися помилковими або небажаними.

Ключові команди GIT

• git init

Команда git init ініціалізує новий GIT-репозиторій у поточній директорії. Це перший крок при створенні нового проєкту, де ви хочете використовувати GIT. Після ініціалізації директорія стає GIT-репозиторієм, і можна починати відстежувати зміни в файлах.

Akash Jha@LAPTOP-LJJ1U61G MINGW64 ~/Desktop/Git (master) 
$ git init 
Initialized empty Git repository in C:/Users/Akash Jha/Desktop/Git/.git/

• git clone

Команда git clone використовується для копіювання наявного віддаленого репозиторію на локальний комп’ютер. Це дозволяє вам отримати всі файли проєкту та його історію змін.

Akash Jha@LAPTOP-LJJ1U61G MINGW64 ~/Desktop/Git (master) 
$ git clone https://github.com/twbs/bootstrap.git 
Cloning into 'bootstrap' ... 
remote: Enumerating objects: 181364, done. 
remote: Counting objects: 100% (13/13), done. 
remote: Compressing objects: 100% (13/13), done. 
Receiving objects: 14% (25606/181364), 16.08 MiB | 839.00 KiB/s

• git commit

Після того, як ви внесли зміни у проєкт, потрібно зафіксувати їх у локальному репозиторії за допомогою команди git commit. Кожен коміт містить опис змін, які були зроблені, що дозволяє детально фіксувати кожен крок у процесі розробки.

Akash Jha@LAPTOP-LJJ1U61G MINGW64 ~/Desktop/Git (master) 
$ git commit -m "first commit" 
[master (root-commit) 5a457ea] first commit 
 1 file changed, 0 insertions(+), 0 deletions(-) 
 create mode 100644 file.txt

• git push та git pull

Команда git push використовується для відправки локальних змін на віддалений сервер, наприклад, на GitHub чи GitLab. git pull, навпаки, завантажує зміни з віддаленого репозиторію на локальну машину.

git push

Akash Jha@LAPTOP-LJJ1U61G MINGW64 ~/Desktop/Git (master) 
$ git push u crio master
Enumerating objects: 3, done.
Counting objects: 100% (3/3), done.
Writing objects: 100% (3/3), 209 bytes | 104.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
remote:
remote: Create a pull request for 'master' on GitHub by visiting:
remote:      https://github.com/akashadr/Crio/pull/new/master
remote:
To https://github.com/akashadr/Crio.git
 * [new branch]      master -> master
Branch 'master' set up to track remote branch 'master' from 'crio'.

git pull

Akash Jha@LAPTOP-LJJ1U61G MINGW64 ~/Desktop/Git (master) 
$ git pull origin master
remote: Enumerating objects: 4, done.
remote: Counting objects: 100% (4/4), done.
remote: Compressing objects: 100% (2/2), done.
remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (3/3), 655 bytes | 3.00 KiB/s, done.
From https://github.com/akashadr/Git
 * branch            master     -> FETCH_HEAD
   5a457ea..4913939  master     -> origin/master
Merge made by the 'ort' strategy.
 New.txt | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 New.txt

• git branch та git merge

GIT дозволяє легко створювати нові гілки проєкту за допомогою команди git branch. Наприклад, для розробки нової функції можна створити окрему гілку. А після завершення роботи об’єднати її з основною за допомогою git merge.

git branch new-feature

Asus@Asus-PC MINGW64 /d/GeeksForGeeks-Project (master)
$ git branch
* master

git checkout new-feature

Asus@Asus-PC MINGW64 /d/GeeksForGeeks-Project (master)
$ git checkout next-five-even-odd
Switched to branch 'next-five-even-odd'

git merge new-feature

Personal@LAPTOP-SKVEHBA2 MINGW64 /e/git merging (main)
$ git merge dev
Updating f95e757..04c050c
Fast-forward
 hello-world2.cpp | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 hello-world2.cpp

• git rebase

Команда git rebase використовується для інтеграції змін з однієї гілки в іншу. Вона дозволяє «переміщувати» базу поточної гілки на будь-яку іншу, що спрощує історію змін і робить її більш лінійною.

git rebase main

VISHAL MANDAL@LAPTOP-GM39CNEV MINGW64 /d/Demo (main)
$ git rebase new_branch
Successfully rebased and updated refs/heads/main.

WebDriver IO: Автоматизація браузерного тестування

WebDriver IO — це потужна бібліотека для автоматизації тестування вебзастосунків, яка базується на WebDriver API. Вона дає змогу розробникам і тестувальникам створювати та виконувати тести для вебсайтів і вебзастосунків у різних браузерах. WebDriver IO має гнучку архітектуру і підтримує інтеграцію з різними фреймворками для тестування, такими як Mocha, Jasmine, Cucumber тощо. Це робить його чудовим вибором для створення автоматизованих тестів у середовищі розробки програмного забезпечення.

Однією з головних переваг WebDriver IO є його підтримка багатьох браузерів, включно з Chrome, Firefox, Safari, Edge, що робить його ідеальним рішенням для крос-браузерного тестування. Це особливо важливо для великих проєктів, де вебзастосунки мають бути доступними для широкої аудиторії з різних платформ і браузерів.

WebDriver IO інтегрується з інструментами для Continuous Integration (CI), як-то Jenkins і Travis CI, а також дозволяє легко налаштовувати End-to-End тестування. Завдяки цьому інструменту команди розробників можуть автоматизувати значну частину процесу тестування, підвищуючи продуктивність та зменшуючи ризик людських помилок.

Для встановлення WebDriverIO слід скористатися мануалом: webdriver.io/docs/gettingstarted.

Основні можливості WebDriver IO

WebDriver IO пропонує багатий набір можливостей, які дозволяють проводити автоматизоване тестування з високою точністю та ефективністю. Серед найважливіших функцій:

1. Інтерактивна робота з браузером

Повний контроль над браузером під час тестування. Ви можете відкривати сторінки, виконувати навігацію між ними, вводити дані у форми, натискати на кнопки та інші елементи інтерфейсу. Це забезпечує можливість проведення повноцінних функціональних тестів користувацького інтерфейсу (UI).

Приклад простої взаємодії з браузером:

browser.url('https://example.com');
const title = browser.getTitle();
console.log('Title is: ' + title);

У цьому прикладі WebDriver IO відкриває сайт і отримує його заголовок.

2. Симуляція подій користувача

Симуляція різних дій користувача, як-то кліки, введення тексту, прокручування сторінки та інші інтеракції з вебзастосунком. Це важливо для перевірки взаємодії з різними елементами інтерфейсу, наприклад, чи правильно відображається інформація після кліку на кнопку або введення даних у форму.

Приклад симуляції кліку:

const button = $('#submit-button');
button.click();

У цьому випадку WebDriver IO знаходить кнопку за її ідентифікатором і симулює клік.

3. Інтеграція з іншими інструментами тестування

Однією з ключових особливостей WebDriver IO є його гнучка архітектура, яка дозволяє інтеграцію з багатьма іншими інструментами для тестування. Наприклад, він підтримує фреймворки для тестування, як-то Mocha, Jasmine, Cucumber. А також може бути інтегрований з інструментами для візуальної регресії та звітування, як-то Allure, Jenkins та інші. Це значно полегшує налаштування тестового середовища.

4. Підтримка багатопотоковості

Виконання тестів у багатьох потоках дозволяє паралельно запускати тести для різних браузерів або частин програми. Це пришвидшує тестування, особливо на великих проєктах з численними тестовими сценаріями.

Налаштування паралельного запуску тестів у WebDriver IO:

capabilities: [{
    maxInstances: 5,
    browserName: 'chrome'
}, {
    maxInstances: 5,
    browserName: 'firefox'
}]

У цьому прикладі одночасно запускаються тести в п’яти інстансах Chrome і Firefox.

Приклади використання WebDriver IO для end-to-end тестів

End-to-end (E2E) тести перевіряють роботу вебзастосунку від початку до кінця, і WebDriver IO є ідеальним інструментом для цього типу тестування. Ось простий приклад тесту, який імітує процес входу до системи.

Приклад тесту на вхід у систему:

1. Відкриття сторінки входу.
2. Введення імені користувача та пароля.
3. Натискання кнопки входу.
4. Перевірка, чи користувач потрапив на домашню сторінку.

describe('Login to Application', () => {
    it('should allow a user to log in', () => {
        // Відкрити сторінку логіну
        browser.url('https://example.com/login');

        // Ввести логін і пароль
        $('#username').setValue('testuser');
        $('#password').setValue('password123');

        // Натиснути кнопку логіну
        $('#login-button').click();

        // Перевірити, чи користувач на домашній сторінці
        const homePageTitle = browser.getTitle();
        expect(homePageTitle).toBe('Home - Example');
    });
});

У цьому прикладі WebDriver IO імітує реальні дії користувача: введення даних та взаємодію з елементами сторінки.

Тест, який перевіряє правильність заповнення форми та її відправку:

describe('Form Submission Test', () => {
    it('should submit form successfully', () => {
        // Відкрити сторінку з формою
        browser.url('https://example.com/form');

        // Заповнити поля форми
        $('#name').setValue('John Doe');
        $('#email').setValue('[email protected]');
        $('#message').setValue('This is a test message.');

        // Натиснути кнопку відправки
        $('#submit-button').click();

        // Перевірити успішне повідомлення
        const successMessage = $('#success').getText();
        expect(successMessage).toBe('Your message has been sent!');
    });
});

А саме — чи правильно вона реагує на заповнення даних і натискання кнопки відправки.

Переваги використання WebDriver IO:

1. Універсальність: підтримка різних браузерів та платформ робить WebDriver IO універсальним інструментом для будь-якого проєкту.
2. Інтеграція з популярними фреймворками: він інтегрується з багатьма інструментами, що полегшує створення тестів і їх впровадження у процес розробки.
3. Швидкість і багатопоточність: можливість одночасно запускати тести для багатьох браузерів або на різних машинах дозволяє економити час.
4. Зручність для новачків та досвідчених тестувальників: WebDriver IO має добре задокументовані функції, які зручні у використанні навіть для тих, хто тільки починає роботу з автоматизованим тестуванням.

Puppeteer: Тестування з використанням headless-браузера

Що таке Puppeteer

Puppeteer — це API для керування headless-браузером на основі Chrome або Chromium, розроблене командою Google. Headless-браузер означає, що він працює без графічного інтерфейсу, але все одно здатен виконувати ті ж самі дії, що й стандартний браузер. Puppeteer використовується для автоматизації ряду завдань, включно з тестуванням вебзастосунків, веб-скрапінгом (отримання даних з вебсайтів), створенням скриншотів і PDF-файлів, а також рендерингом сторінок.

Puppeteer надає розробникам і тестувальникам повний контроль над браузером. Він дозволяє програмно взаємодіяти зі сторінками через JavaScript, керуючи елементами DOM, симулюючи користувацькі події (кліки, введення тексту), а також отримуючи й аналізуючи дані сторінок. Puppeteer підходить для різних завдань, як-то:

• Тестування UI-вебзастосунків у браузері.
• Створення динамічних скриншотів сторінок.
• Створення PDF-документів з HTML-сторінок.
• Автоматизація задач веб-скрапінгу для збору даних.
• Рендеринг сторінок для server-side рендерингу (SSR) у JavaScript-застосунках.

Ключові можливості Puppeteer

Puppeteer має багатий функціонал для взаємодії з браузером, який спрощує автоматизацію вебзастосунків. Для встановлення Puppeteer можна скористатися наступним мануалом: pptr.dev/guides/installation

Розгляньмо його основні можливості.

1. Робота з DOM

Puppeteer дозволяє програмно керувати елементами DOM-сторінок. Ви можете отримувати доступ до будь-якого елемента на сторінці, взаємодіяти з ним, змінювати його властивості або навіть повністю перебудовувати сторінку.

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://example.com');

    // Отримати заголовок сторінки
    const title = await page.title();
    console.log(title);

    await browser.close();
})();

У цьому прикладі Puppeteer відкриває сторінку, отримує її заголовок і виводить його у консоль.

2. Навігація сторінками

Він також дає змогу програмно переходити між сторінками, відкривати нові вкладки, оновлювати сторінки і виконувати інші дії з навігацією. Це корисно для перевірки роботи різних частин вебзастосунків або для тестування функціональності переходів між сторінками.

await page.goto('https://example.com');
await page.goBack(); // Повернення назад
await page.goForward(); // Перехід вперед

3. Симуляція користувацьких подій

Однією з найпотужніших функцій Puppeteer є можливість симулювати дії користувача, такі як кліки, введення тексту, прокрутка сторінок, вибір елементів та інші інтеракції. Це дозволяє автоматизувати процес тестування інтерфейсу, забезпечуючи точність і надійність перевірок.

await page.click('#submit-button'); // Клік на кнопку
await page.type('#username', 'testuser'); // Введення тексту

4. Створення PDF

Puppeteer дозволяє перетворювати HTML-сторінки у PDF-документи. Це особливо корисно для генерації звітів або статичних копій вебсторінок.

await page.pdf({ path: 'page.pdf', format: 'A4' });

5. Створення знімків екрана (скриншотів)

Важливою є і можливість зберігати знімки екрану як всієї сторінки, так і її окремих елементів. Це особливо корисно для перевірки зовнішнього вигляду сторінки або UI після внесення змін.

await page.screenshot({ path: 'screenshot.png', fullPage: true });

Порівняння з WebDriver IO

Puppeteer та WebDriver IO — популярні інструменти для автоматизації браузерного тестування, але вони мають різні підходи до цього завдання.

Puppeteer

• Headless-режим за замовчуванням. Керує браузером Chrome або Chromium у безголовому режимі за замовчуванням, хоча його можна налаштувати для роботи з інтерфейсом.
• Глибока інтеграція з Chrome. Спеціалізується на роботі з Chrome і Chromium. Він пропонує більше можливостей для глибокого контролю над цими браузерами.
• Швидкість. Працює швидше, оскільки headless-браузер використовує менше ресурсів і не потребує рендерингу графічного інтерфейсу.
• Обмежена підтримка браузерів. Здебільшого обмежується браузерами на основі Chromium, тому при тестуванні у Firefox, Safari або Edge можуть виникати складнощі.
• Простий API. Має зручний і простий API, який добре підходить для скрапінгу, генерації PDF і скриншотів, а також для тестування у Chrome.

WebDriver IO

• Підтримка багатьох браузерів. Підтримує тестування у браузерах Chrome, Firefox, Safari, Edge, що робить його ідеальним для кроссбраузерного тестування.
• WebDriver API. Базується на стандарті WebDriver API, що робить його більш універсальним для різних середовищ і фреймворків.
• Інтеграція з тестовими фреймворками. Підтримує інтеграцію з такими тестовими фреймворками, як Mocha, Jasmine та Cucumber, що полегшує налаштування тестування і роботу у великих проєктах.
• Підтримка багатопоточності. Може виконувати тести в паралельних потоках, що значно прискорює процес тестування на великих проєктах.

Коли вибрати Puppeteer:

• Якщо ваш проєкт обмежується тестуванням у браузерах на основі Chromium.
• Якщо потрібна висока швидкість виконання тестів у безголовому режимі.
• Якщо проєкт вимагає генерації PDF або знімків екрана.
• Якщо необхідний глибокий контроль над Chrome (наприклад, для скрапінгу чи SEO-аналізу).

Коли вибрати WebDriver IO:

• Якщо вам потрібно тестувати ваш вебзастосунок у кількох браузерах (наприклад, Chrome, Firefox, Safari).
• Якщо вам потрібна інтеграція з великими тестовими фреймворками або інструментами для CI/CD.
• Якщо важливо виконувати тести на різних платформах і пристроях.
• Якщо ваш проєкт потребує багатопотокового тестування.

Отже, у цій статті ми:

• Розібрали, що таке GIT, як він допомагає організувати командну роботу та навели приклади ключових команд у цій розподіленій системі контролю версій.
• Проаналізували два інструменти браузерного тестування: WebDriver IO та Puppeteer: їх можливості, переваги та приклади застосування. Також дали відповідь на питання, коли краще використати Puppeteer, а коли WebDriver IO.

Втім, згадані інструменти — зовсім не вичерпний перелік технологій для тестування. У другій статті розповім детальніше про JavaScript як мову для тестування, Supertest та Jest/Mocha. Також розгляну, як інтегрувати всі інструменти у CI/CD процес. Для цього наведу приклад пайплайну: кроки автоматизації від збереження коду в GIT до запуску тестів та розгортання в production.