Online QADay 2022 МИХАЙЛО БОДНАРЧУК «Як перестати боятись та полюбити автотести на JavaScript» telegram: wwww.t.me/goqameetup fb: www.fb.com/goqaevent fb: www.fb.com/qaday.org linkedin: https://www.linkedin.com/company/goqa/ Сайт: www.qaday.org

1. Як перестати боятись
та полюбити автотести на JavaScript

2. Про мене
Open-source розробник фреймворків для
тестування
Codeception (PHP)
CodeceptJS
CTO at Testomat.io
Пишу код, пишу тести, пишу історії

3. Коли потрібна автоматизація
клацати одне і те саме ліниво
помилки людського фактору
однотипність сценаріїв
швидкість перевірки
думати не треба

4. Програмування
це складно
вам воно нафіг не треба

5. Тестувати систему можна
Ззовні Зсередини
Інтерфейс Код
Сценарії взаємодії Стан системи
Весь застосунок Окремі компоненти
Повільно Швидко

6. Всередині
Як все працює в деталях: (це взагалі не до вас)
Юніт тести
Інтеграційні тести
Функціональні тести
Ззовні
Як все працює загалом: (а оце для вас)
Прийомні тести (Acceptance)

7. Правила автоматизації
Фокус на бізнес-сценаріях
Однозначність результату
Незалежність виконання
Атомарність

8. Структура тесту
Given (в якому стані система)
When (ми щось змінюємо)
Then (перевірямо що сталось)

9. Звучить складно?

10. НІТ!
Бо ми вивели серію обмежень для наших тестів.
А значить писати їх буде просто

11. Так ОСЬ!
тестувати систему ми можем тільки ззовні
тест бачить тільки те що бачить користувач
тест має бути максимально коротким
тест має бути простим як двері

12. Що з програмування НЕ ТРЕБА для
автотестів:
if/else - порушують однозначність виконання
for/while/until - роблять щось ніпонятне
abstract class interface - ускладнюють розуміння
type A<T> - переобтяжують написання коду

13. Чим краще ви знаєте
програмування тим складніше вам
написати простий тест

14. Як має виглядати тест
// Given
I.openWebSite();
// When
I.changeSomething();
// Then
I.seeItWasChaged();

15. Як це працює в вебі
// Given
I.amOnPage('https://rozetka.ua');
// when
I.click('Блендер')
I.see('Категорія: Блендери')
I.click('Samsung')
I.click('Купити')
// Then
I.see('Блендер Samsung додано в кошик')

16. Що треба щоб тестувати веб
Базовий JavaScript
HTML елементи
CSS та як по ньому шукати елементи
Що таке DevTools
XPath ви все одно його не вивчите. Гугл в помічь
Робота з терміналом
Робота з гітом
Мати наставника

17. Ваш тест може робити тільки те що може
зробити будь-який користувач

18. Java vs JavaScript
// java
import java.io.*;
class Test {
public static void main()
{
System.out.println("Привіт");
}
}
// javascript
console.log('Привіт')

19. Інструменти JavaScript
1. Cypress.io
2. CodeceptJS
3. Playwright
4. Puppeteer
5. webdriverio

20. Інструменти Java
1. Selenium WebDriver

21. Напишемо простий тест на
CodeceptJS

22. Встановлення
CodeceptJS
npx create-codeceptjs .
керування браузером
іде через Playwright

23. Налаштування
npx codeceptjs init
вказати двигун
управління
браузера
вказати URL сайту
вказати шлях до
тестів

24. Перший тест
Feature('Book');
Scenario('book apartment', ({ I }) => {
I.amOnPage('https://airbnb.com');
pause();
}
Let's see what pause() is

28. Готовий тест на CodeceptJS
Feature('Book');
Scenario('book apartment', ({ I }) => {
I.amOnPage('https://airbnb.com');
I.fillField('#bigsearch-query-detached-query', 'Vilnius')
I.pressKey('Enter');
I.click('[data-testid=datepicker-day-2020-10-09]')
I.pressKey('Enter')
I.click('[data-testid=datepicker-day-2020-10-12]')
I.pressKey('Enter')
I.pressKey('Enter')
I.click('Search')
I.see('Studio Loft')
I.see('Cozy apartment')
I.see('Angel House')
});

29. Складні елементи в тестуванні
Очікування взаємодії
Робота з данними
Календарі
Несандартні елементи керування
Drag&Drop
Текстові редактори
...

30. Запуск тестів
Потрібен доступ до застосунку
Потрібен браузер
Потрібен двигун управління браузером
Playwright
Cypress.io
Selenium WebDriver

31. Continuous Integration
Все це немає сенсу, якщо тести не запускаються
регулярно

32. Як налаштувати CI сервер
напишіть пару браузерних тестів
попросіть розробників налаштувати вам CI

33. Як почати писати тести
1. Оберіть веб-сайт (ні, не Google.com)
2. Встановіть фреймворк тестування
3. Використовуючи інфу з DevTools керуйте браузером
4. Записуйте результати в код
5. Запускайте!

34. Дякую за увагу!
Михайло Боднарчук
Twitter: @davert
GitHub: DavertMik
LinkedIn linkedin.com/in/davert
CodeceptJS найкращий фреймворк для тестів на JavaScript
Testomat.io
t.me/sorrytell мій телеграм канал (не про тестування)

35. Ніт,
TypeScript вам теж не потрібен