В този кратък урок ще се потопим в Cypress. Cypress е инструмент за тестване на предния край за тестване на всичко, което работи в браузър, може би вече сте чували за него, тъй като бързо набира популярност.

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

Cypress идва като npm пакет, който може да бъде инсталиран като зависимост към вашия проект. Това, което ще направи, е след като го инсталирате чрез npm или yarn (за .например npm install)

Ще имате добавен кипарис в добавените node_modules.
Уверете се, че вече сте стартирали npm init или имате папка node_modules или package.json файл в корена на вашия проект, за да сте сигурни, че cypress е инсталиран в правилната директория.

За бързо видео за това как да инсталирате/работите кипарис във вашето репо, локално. Вижте документите на кипарисите, за да започнете с това.

След като сте инсталирали cypress, ще ви помоля да започнете да пишете някои тестове. По дяволите, да, нека го направим.

Във вашия проект се уверете, че имате папка, наречена cypress и cypress.json, която може да не е необходима засега, тъй като не е необходимо да отменяме тези конфигурации, но просто трябва да се уверим, че baseURL е дефиниран като следващ cypress .json

{
  "BaseUrl": "http://127.0.0.1:8080"
}

полезно е специално да добавите основния URL към конфигурацията на кипарис. Защо? Тъй като това ще опрости нещата за нас, когато посещаваме уебсайта, в нашия тестов инструмент не е необходимо да въвеждаме URL адреса, той по подразбиране ще открие основния URL адрес в cypress.json и ще го приложи.

Всичко трябва да е наред и трябва да сме добре да започнем да пишем първите си тестове. За целта може да се наложи да имате готова страница за бързо тестване. Ако вече сте създали свой собствен проект, можете директно да преминете към следващата стъпка, но ако не сте, моля, не се колебайте да разклоните проекта, който създадох по-долу, и започнете да удряте на земята

https://github.com/seifedd/CryptoLists/tree/master

Това е готов за работа проект, който можете да използвате за практикуване на кипарис.

Сега нека се потопим в cypress без повече шум, нека клонираме проекта

git клонинг [email protected]:seifedd/CryptoLists.git

Следващата стъпка ще напише пример за тест от край до край за страницата за вход на проекта. Преди да направим това, трябва да се потопим в папката cypress, така че ако имате VS код като IDE или друга IDE, опитайте да отворите проекта, наречен CryptoList, след като сте изтеглили кода по-горе и сте настроили git init .

След като отворите проекта в любимата си IDE, трябва да отидете в папката Cypress, която вече трябва да е инсталирана. След добавяне на всеки нов проект, Cypress автоматично ще създаде предложена структура на папките.

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

Сега, за да напишем първия си тест, трябва да създадем нова папка под интеграция. Можем да именуваме файла като името на компонента, който бихме искали да тестваме, например homepage-login.spec.js Това е файлът, в който ще се намират нашите тестове.

Разглеждайки сега нашето приложение, нека започнем да пишем някои тестове, нека отворим homepage-login.spec.js. Писането на тестове в cypress използва рамката mocka, така че можете да посочите. опишете теста и създайте твърдения. Използване на BeforeEach за изпълнение на скрипт преди всеки тест, например както е показано по-долу

beforeEach(() => {
cy.visit('/');
})

Сега за действителните тестове можем да потвърдим влизането, първо, елементите във формуляра за влизане съществуват (полето за въвеждане на потребителско име, парола (ако е приложимо) и ПИН код (ако е приложимо)).

Вече написах пример, където можете да проверите заедно

   //check the elements within the login form
    cy.get('.login').within(() => {
      cy.get('.login__input--user').should('have.attr', 'placeholder', 'user');
      cy.get('.login__input--pin').should('have.attr', 'placeholder', 'PIN');
    });

За пълен и успешен тест трябва да започнем с нещастния път и след това да валидираме щастливия път. Вече написах проста версия, която можем да разширим и надграждаме.

Моля, проверете по-долу за пълна версия на тестовете:
https://github.com/seifedd/CryptoLists/blob/master/cypress/integration/1-getting-started/homepage-login.spec.js

Също така вижте видеото, което качих в Youtube, когато пишех тестовете