Создайте ваш первый тест на Cypress

[catanfa]

В чём отличия от https://codecept.io/?

[RommelDragon]

Я не использовал codecept, но по первому взгляду он использует старый движок Selenium для взаимодействия с браузером(в Cypress используется иная технология) и в codecept доступны из коробки поддержка BDD и Page Objects.

[StanislavFist]

поддерживает написание модульных, интеграционных и End-to-end тестов,

прикольно. но для end-to-end тестов нужно тестировать API.
на нее так же просто написать как и на UI, с помощью этого фреймворка?

[RommelDragon]

Да, там есть метод cy.request() для отправки запроса и он возвращает response, который уже можно проверить на какие либо условия, пример:

cy.request('https//test/v1/api/')
      .then((response) => {
          expect(response.body).to.have.property('code', 200)
       })

[Plotogon]

Спасибо большое за статью. Такие люди как вы делают мир лучше.
До вашей статьи я пытался самостоятельно освоить selenium и так и не понял, на какой козе к нему подъехать. У меня нет опытного наставника, а нормального руководства или толковой документации по селениуму я в интернете не встретил.
И тут эта статья. Я заинтересовался проектом, стал ковырять интернет и обнаружил, что есть автотестирование с человеческим лицом. На официальном сайте документации и примеров довольно много и так всё описано, что даже неподготовленному человеку вроде меня вполне можно разобраться без посторонней помощи.
Интересно, что когда я две недели назад прочитал вашу статью, я почти ничего не понял. Понял только, что должно быть не очень сложно. Сегодня я вернулся к статье и с удивлением обнаружил, что я всё понимаю, что тут написано! Это супер! Не останавливайтесь на достигнутом, такие статьи очень полезны для новичков и для тех, кто пробует что-то новое.
Что я могу в сказать в дополнение к статье исходя уже из собственного «опыта»:
1. Там на самом деле функций конечно не шесть, а намного больше, просто используются они реже. А вышеперечисленными можно действительно протестировать довольно много чего. Я бы ещё добавил описание классной функции scrollIntoView — позволяющей проскроллить страницу у нужному элементу, прежде чем с ним манипулировать.
2. В сайпресе не смотря на кажущееся могущество, есть слабые стороны. Например, сложно протестировать загрузку файла на сайт или добраться до данных в iframe, хотя в интернете пишут, что костылики уже написаны и можно использовать.
3. Не всякий сайт подходит для автотестов без предварительной его подготовки. Об этом даже в документации пишут, что идеально было бы в нужных местах кода страницы сразу прописать локаторы, по которым потом сайпресу было бы легко находить элементы. А если этого не сделать, то имеющиеся локаторы могут просто поменяться в следующем релизе сайта. Есть вопросы по взаимодействию с ReactJS (а может реакт тут и ни причём). Почему то клик по элементу сайпресом сайт обрабатывает не так, как клик курсором мыши. И отсюда тоже проблемы.
4. Т.к. сайпресс интерпретирует свои функции в обычный JavaScript, то если не знаешь, как это написать в функциях сайпреса, то прямо в скрипт для сайпресса можно вписывать код JavaScript и он там отлично работает.
5. В вашем примере вы используете внешний файл для fixture, что конечно же круто, но стоит упомянуть, что пользоваться этим способом совсем не обязательно. Если данных мало и они не изменяются, то данные можно просто вбивать сразу в код скрипта, что ещё больше упростило бы ваш пример.

Жду ваших новый статей. У меня к сайпрессу ещё много вопросов. :)

[RommelDragon]

Спасибо большое) Очень приятный отзыв) Более всего рад что вам помогла моя статья)

Да, на самом деле в Cypress много функций и изучаешь их по мере необходимости)
Про подготовку сайтов да, есть такая проблема) Мы стараемся добавлять свои локаторы, но это не всегда возможно, так как иногда используются базовые компоненты из библиотек) Можно конечно всегда использовать div с локатором чтобы обернуть в него базовый компонент.
Загрузку на сайт с Cypress еще не тестировал, но писал загрузку на Selenium(python), но как-нибудь гляну.
На данный момент планирую написать еще статью касаемо применения отдельных функций cypress.
Буду продолжать нести добро и понимание в этот мир;)

[algot]

У вас опечатка

 cy.fixture('cypressTests').then(data => {

а должно быть

 cy.fixture('cypressTest').then(data => {

[RommelDragon]

Спасибо)вначале планировалось сделать для примера один тест, затем для наглядности сделал 2 теста)
поэтому оставлю cypressTests, но поправлю в начале создания фикстуры)