В днешно време стартирането на уеб приложение без E2E тестване е като шофиране на кола без предпазен колан. Cypress е една от най-модерните рамки за Javascript End to End (E2E) тестване в момента. Той предлага отворен код и има някои завладяващи функции като автоматично изчакване, последователни резултати и презареждания в реално време.

Cypress Kitchen Sink е примерен проект с отворен код, създаден от самия Cypress. Ако вече имате уеб приложение и сега трябва да добавите Cypress, за да защитите функциите си, това е най-добрият проект, с който да започнете. Той съдържа достатъчно примери, както и настройки, които можете да използвате директно във вашия собствен проект.



cypress-io/cypress-example-kitchensink
Това е примерно приложение, използвано за демонстриране на тестването на Cypress.io. Приложението използва всяка API команда в Cypress за...github.com



Cypress Kitchen Sink съдържа напълно работещо уеб приложение в папката с приложения, но папката, която трябва да копирате, е папката cypress. Съдържа 4 подпапки:

  • Приспособление (за съхраняване на подигравателни данни)
  • Интегриране (за код за тестване. Премахнете папката с примери и добавете свои собствени тестови случаи)
  • Приставка (Само в случай, че имате нужда)
  • Поддръжка (Основно за създаване на ваши собствени cypress команди)

Следните файлове също си струва да се проверят:

  1. package.json

В тага на скрипта има различни команди за стартиране на Cypress. По-долу са 3 от тях за бърз старт.

"cy:run": "cypress run",    
"cy:run:record": "cypress run --record",    
"cy:open": "cypress open",

В раздела за зависимости са включени и добавките за eslint.

"cypress": "3.4.1",    
"eslint": "5.16.0",    
"eslint-plugin-cypress": "2.6.1",    
"eslint-plugin-cypress-dev": "2.1.0",    
"eslint-plugin-mocha": "5.3.0",

2. .eslintrc

Като цяло копирайте всичко тук.

3. .gitignore

Използва се за игнориране на файлове, генерирани от cypress, или определени приспособления.

cypress/screenshots
cypress/videoscypress/logs
cypress/fixtures/profile.json
cypress/fixtures/users.json

Сега ще имате cypress, интегриран с lint и gitignore. Просто стартирайте yarn && yarn cy:open, за да започнете.

Продължете нашето пътуване

Това е първата статия на Cypress от Metigy. Това е началото на нашето пътуване, за да прегърнем E2E в нашето развитие. Очакват се още статии от Cypress:

  • Кипарис Ламбда
  • Как да настроите standardjs за lint Cypress
  • Как да се справя с iframes в Cypress

Кажете ни в коментарите по-долу какво мислите и дали имате някакви съвети, които вие самите имате. И не забравяйте да ръкопляскате с тази статия!