🛑 Данный туториал отображается на GitHub 🔴 не корректно! Это лишь исходник.
Правильная версия https://www.epic1h.com/cypress_test_flight

Туториал: первый полет на Cypress

Подойдет тем, кто хочет начать писать автоматизированные тесты.

👍 Что сделаем

Создадим чистый Java Script проект на Node.js.
Установим Cypress через менеджер пакетов npm.
Напишем авто-тест подписки на рассылку Cypress.

💪 Минутка мотивации

Задача End-To-End тестов — нажимать на кнопки, вводить данные в поля формы, двигать мышкой — как это делал бы человек.

Заставь компьютер работать за себя! Ты тут босс 😎

🙋‍ Перед началом

Ты знаком с основами ручного тестирования приложений
У тебя установлен Node.js и Visual Code

😍 Живая обратная связь

Каждый вторник я провожу бесплатные онлайн стендапы в Zoom.

Если у тебя есть вопрос или проблема, подключайся:

В 20:00 по MSK нажми на ссылку
Введи пароль zyx
Подними руку или напиши вопрос в чате.
В случае необходимости, будь готов пошарить свой экран.

@[Anton Breslavsky|https://t.me/breslavsky_anton|assets/anton.jpg]

Что бы следить за анонсами новых туториалов подписывайся на телеграмм канал

🔢 Шаги

❗ Внимание! Cypress обновил свой сайт после выхода видео.

Записанное видео, немного не соответствует туториалу и будет скоро обновлено.

Если ты любишь сначала смотреть, а потом делать 📹 Видео-туториал

+1. Инициализируем проект

Node.js — среда выполнения Java Script и менеджер пакетов npm.

Создай папку %/projects/cypress/test_flight
В Visual Code открой папку проекта.
Открой Терминал → Новый терминал.
Выполни в терминале npm init
На все вопросы нажми ENTER ↵, в конце введи yes + ENTER ↵
Проверь что в папке проекта появился файл package.json

Не получается 📹

Главный навык хорошего IT специалиста — уметь гуглить!

Научись формулировать вопросы и получать ответы самостоятельно.

Начни вести свой собственный словарь терминов.

❓ Что такое инициализация проекта?
❓ Зачем нужен файл package.json?

Крутая фишка 😎

Можно выполнить команду npm init -y ~"В конспект" и файл package.json будет создан сразу.

🤷‍♂️ Зачем мне это?

Инициализация — первый этап любого проекта.

Ты должен проснуться в 3 часа ночи и знать как начать новый проект.

📹 Мое объяснение

+2. Ставим Cypress

Выполни команду npm install cypress@9 --save-dev ~"В конспект"

Не получается 📹

❓ Зачем нужна папка node_modules?
❓ Какой версии установлен Cypress?
❓ Зачем нужен раздел devDependencies в package.json?
❓ Что такое JSON?

Где найти все доступные версии Cypress?

На вкладке версии пакета Cypress в репозитории менеджера пакетов NPM https://www.npmjs.com/package/cypress

Почему мы используем Cypress 9, а не 12?

Твоя задача изучить основы, которые не меняются от версии к версии.
Я отдельно научу тебя обновлять фреймворк до любой версии.

🤷‍♂️ Зачем мне это?

Пакеты — это наборы готового кода, написанные другими разработчиками. ~"В конспект"

Зачем писать велосипеды, если их уже кто-то написал и выложил?

Легче найти нужный пакет, типа Cypress на https://npmjs.com, установить и начать использовать.

📹 Мое объяснение

+3. Первый запуск Cypress

Выполни команду npx cypress open ~"В конспект"

Не получается 📹

❓ Появилась папка cypress в корне проекта?
❓ Что делает утилита npx?
❓ Что за файлы .spec.js лежат в папке cypress/integration?
❓ Что ты видишь в окне Cypress?

🤷‍♂️ Зачем мне это?

Ты должен знать как запускать Cypress в режиме разработки тестов.

📹 Мое объяснение

+4. Запуск примера теста

В окне Cypress выбери todo.spec.js
Перезапусти тест еще раз.

Не получается 📹

❓ Что происходит в Chrome?

📹 Мое объяснение

+5. Пишем свой тест

Нажми CTRL + C в терминале, чтобы остановить Cypress ~"В конспект"
Из папки cypress/integration удали 1-getting-started и 2-advanced-examples
Создай файл cypress/integration/hello-cypress.spec.js:

it('should do subscribe to news letter', () => {

cy.visit('https://www.cypress.io/');

});

Отформатируй код ~"В конспект"
- На Windows SHIFT + ALT + F
- На MacOS SHIFT + OPTION + F
- На Linux CTRL + Shift + I
Сохрани файл CTRL + S
Выполни команду npx cypress open
В окне Cypress выбери hello-cypress.spec.js

Назойливая 🤦‍️ **mocha**

Visual Code постоянно добавляет строчку const { it } = require("mocha"); и код не работает?

Пропиши в начале файла теста: ~"В конспект"
```
///<reference types="cypress" />
```

Не получается 📹

❓ Что такое it?
❓ Что такое cy.visit?

❗ Всегда используй для названия тестов шаблон it('should do something...

📹 Мое объяснение

+6. Открываем форму подписки

Прокрути страницу в самый низ до кнопки Subscribe to our newsletter.
Активируй selector playground.

Наведи курсор на кнопку.
Скопируй код селектора.

Обнови код теста:

it('should do subscribe to news letter', () => {

    cy.visit('https://www.cypress.io/');
    cy.get('.footer-form > .border').click();

});

+7. Заполняем форму подписки

Так же через selector playground наведи курсор на поле Email.
Скопируй код селектора.
Обнови код теста:

it('should do subscribe to news letter', () => {

    cy.visit('https://www.cypress.io/');
    cy.get('.footer-form > .border').click();
    cy.wait(1000);
    cy.get('#subscribe-email').type('test@test.ru');

});

Замени email в коде на свой.
Не забудь отформатировать код!
Сохрани файл.
Переключись на окно Cypress.

Не получается 📹

❓ Что происходит в Chrome?
❓ Что такое cy.get()? ~"В конспект"
❓ Что такое #subscribe-email?
❓ Что такое .type()? ~"В конспект"
❓ Что такое cy.wait(1000)?

На самом деле wait плохая практика. Скоро ты узнаешь почему.

📹 Мое объяснение

+8. Отправляем форму подписки

Найди селектор для:
- галочки — I agree to receive emails
- кнопки — Subscribe today
Обнови код теста:

it('should do subscribe to news letter', () => {

    cy.visit('https://www.cypress.io/');
    cy.get('.footer-form > .border').click();
    cy.wait(1000);
    cy.get('#subscribe-email').type('test@test.ru');
    cy.get('.flex > .block').click();
    cy.get('.border-t > .border').click();

});

Не забудь отформатировать код!

Не получается 📹

❓ Что происходит в Chrome?
❓ Что такое .border-t > .border?
❓ Что такое .click()? ~"В конспект"

📹 Мое объяснение

+9. Проверяем подписку

Найди селектор для элемента с сообщением Thank you for subscribing!
Обнови код теста:

it('should subscribe to news letter', () => {

    cy.visit('https://www.cypress.io/');
    cy.get('.footer-form > .border').click();
    cy.wait(1000);
    cy.get('#subscribe-email').type('test@test.ru');
    cy.get('.flex > .block').click();
    cy.get('.border-t > .border').click();
    cy.get('.leading-36px').should('have.text', 'Thank you for subscribing!');

});

Не забудь отформатировать код!

Не получается 📹

❓ Что такое .leading-36px?
❓ Что такое .should('have.text', '?')? ~"В конспект"

🤷‍♂️ Зачем мне это?

❗ Тесты не просто должны кликать по кнопкам!

Задача тестов — проверять правильность работы программы!

Кликнул → проверь результат! ~"В конспект"

📹 Мое объяснение

+10. Запускаем Cypress в Headless

Закрой Cypress в терминале CTRL+C
Выполни команду npx cypress run ~"В конспект"
В package.json обнови команду test в разделе scripts:

+  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "cypress run"
+  }

Выполни команду npm test

Не получается 📹

❓ Что ты видишь в терминале?

🤷‍♂️ Зачем мне это?

Ты должен знать как запускать Cypress в режиме прогона тестов.

Уже совсем скоро, именно с помощью этой команды, ты будешь запускать свои тесты на своем сервере!

📹 Мое объяснение

+11. Ломаем тест

Сломай сообщение в коде:

- 'Thank you for subscribing!'
+ 'Thank you for subscribing!!!'

Снова запусти Cypress npm test

Не получается 📹

❓ Что ты видишь в терминале?
❓ Что лежит в паке ~/cypress/videos?

Бинго 🥳

Сделай так, что бы тест снова работал.

🤷‍♂️ Зачем мне это?

Тесты могут ломаться в будущем. Ты должен уметь искать причины и исправлять их.

Та да 🥳 Ты дошел до конца.

🙏 Фидбек пожалуйста

Полезный материал?

* 🤩 Очень полезный материал
* 😃 В целом полезный
* 😐 Возможно что-то пригодится
* 😒 Нет ничего полезного
* 😬 Абсолютно бесполезно


**Спасибо за ответ!**

Все ли было понятно?

* 🤩 Все понятно на 100%
* 😃 В целом все понятно
* 😐 Что-то понятно, что-то нет
* 😒 Понял только малую часть
* 😬 Ничего не понял


**Спасибо за ответ!**

Как тебе такой формат туториала?

* 🤩 Очень удобно
* 😃 Мне понравилось
* 😐 Нормально
* 😒 Не удобно
* 😬 Ужасно


**Спасибо за ответ!**

👨‍🎓 Чему ты научился

😭 Домашка

Прочитай про все типы CSS селекторов.
Поиграйся с тренажером.
Пройди тест ниже.

Выбери точный селектор для элемента:

<p id="success">Thank you for subscribing!</p>

- [ ] `cy.get('id=success')`
- [x] `cy.get('p#success')`
- [ ] `cy.get('p.success')`


Селектор по [id](https://www.w3schools.com/cssref/sel_id.php)

<p class="success message">Thank you for subscribing!</p>

- [ ] `cy.get('[class=success]')`
- [ ] `cy.get('p#class')`
- [x] `cy.get('p.success.message')`


Селектор по классам `class="xyz zyx"`

<p data-cy="success">Thank you for subscribing!</p>

- [x] `cy.get('p[data-cy=success]')`
- [ ] `cy.get('data-cy=success')`
- [ ] `cy.get('p.data-cy.success')`


Селектор по [аттрибутам](https://www.w3schools.com/cssref/sel_attribute_value.php)

<p data-cy="success xyzXYZ">Thank you for subscribing!</p>

- [x] `cy.get('p[data-cy^=success]')`
- [ ] `cy.get('p[data-cy.=success]')`
- [ ] `cy.get('p[data-cy?=success]')`


Селектор по [начальному значению аттрибута](https://www.w3schools.com/cssref/sel_attr_begin.php)

<p data-cy="xyzXYZ success">Thank you for subscribing!</p>

- [ ] `cy.get('p[data-cy.=success]')`
- [x] `cy.get('p[data-cy$=success]')`
- [ ] `cy.get('p[data-cy#=success]')`


Селектор по [конечному значению аттрибута](https://www.w3schools.com/cssref/sel_attribute_value_lang.php)

<p data-cy="xyzXYZ success XYZxyz">Thank you for subscribing!</p>

- [ ] `cy.get('p[data-cy^=success]')`
- [x] `cy.get('p[data-cy*=success]')`
- [ ] `cy.get('p[data-cy$=success]')`


Селектор по [содержимому значения аттрибута](https://www.w3schools.com/cssref/sel_attr_contain.php)

У тебя есть HTML документ:

<h1 class="subscription">News letter subscription</h1>
<form>
  <input name="email" type="email">
  <input name="confirm-email" type="email">
  <button type="submit">Submit</button>
</form>

<h1 class="disclaimer">Disclaimer</h1>
<p>The content of this message is confidential.</p>

Заполни код:

cy.get('?|h1.subscription|?').should('have.text', 'News letter subscription');
// email input
cy.get('?|input[name=email]|?').type('?');
// confirm email input
cy.get('?|input[name=confirm-email]|?').type('?');
// submit button
cy.get('?|button[type=submit]|?').click();

🤩 Хочу еще

Не хватило? Поиграйся с https://automationteststore.com/

Добавь пару товаров в корзину.
Оформи заказ.

Туториал: первый полет на Cypress

👍 Что сделаем

💪 Минутка мотивации

🙋‍ Перед началом

😍 Живая обратная связь

🔢 Шаги

+1. Инициализируем проект

🤷‍♂️ Зачем мне это?

+2. Ставим Cypress

🤷‍♂️ Зачем мне это?

+3. Первый запуск Cypress

🤷‍♂️ Зачем мне это?

+4. Запуск примера теста

+5. Пишем свой тест

+6. Открываем форму подписки

+7. Заполняем форму подписки

+8. Отправляем форму подписки

+9. Проверяем подписку

🤷‍♂️ Зачем мне это?

+10. Запускаем Cypress в Headless

🤷‍♂️ Зачем мне это?

+11. Ломаем тест

🤷‍♂️ Зачем мне это?

🙏 Фидбек пожалуйста

👨‍🎓 Чему ты научился

😭 Домашка

🤩 Хочу еще

📹 Видео-ответы