Затруднявате ли се с тестване от край до край? Усещам те. E2E не би трябвало да е трудно. В следващата публикация ще научите как да правите крайно тестване на Javascript с Cypress.

Тестването от край до край, наричано още E2E или UI тестване, е една от многото фази на тестване, обхващащи уеб приложение.

Чрез написването на тест от край до край е възможно да се потвърди дали дадено уеб приложение работи според очакванията или не. Освен това с E2E ще тествате потребителския поток на вашето приложение. Започвайки от процеса на регистрация.

Важно ли е наистина тестването от край до край?

Да, така е. Но никой не харесва E2E тестове. Те могат да бъдат бавни, тромави и скъпи.

От друга страна, тестването ви дава увереност. Чрез тестване на приложение можете да сте сигурни, че ще работи за вашите клиенти. И така, какво да правя?

Въведете Cypress: рамка за тестване от край до край на Javascript. Това ще улесни живота ви.

Тестване от край до край с Cypress: тестване на приложение от База знания

Наскоро писах за Кукловод.

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

В момента създавам Приложение за база знания за управление на често задавани въпроси. Приложението вече има някои тестове на функции, но му липсва End to End.

Как мога да поправя това? Puppeteer е страхотен за бързо тестване.

Но когато става въпрос за тестване на цяло приложение, по-добре е да застанете на раменете на гигантите.

Cypress е рамка за тестване от край до край на Javascript.

За разлика от Puppeteer, който е библиотека, Cypress ви дава солидна платформа за писане и автоматизиране на UI тестове. Без да се притеснявате много за останалото.

Обратно към моята кандидатура, какви изисквания имам?

  1. Искам да показвам контейнер, когато няма статии
  2. Искам да вляза като администратор
  3. Искам да създам и запазя нова статия
  4. Всеки гост трябва да може да кликне върху връзка към публикуваната статия

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

И с изискванията на място е време да напишем някои тестове.

Крайно тестване с Cypress: настройка на проекта

Cypress ще се побере веднага във всяко съществуващо приложение.

За да инсталирате Cypress, преместете се в папката на вашия проект и стартирайте:

npm i cypress --save-dev

Дайте му няколко секунди и сте готови.

Преди да преминете към директориите на Cypress с

node_modules/.bin/cypress open

Cypress ще създаде свои собствени директории под ./cypress

Чувствайте се свободни да затворите Cypress сега. Ще се върнем към него.

Cypress идва с хубав пример за тестване. Доносете вътре cypress/integration/example_spec.js и ще намерите файл с много редове.

Това е всичко, което трябва да знаете, за да започнете да тествате. Но в името на ученето е по-добре да пишете свои собствени тестове от нулата.

В моя случай започвам да създавам нов файл с име app_spec.jsinside cypress/integration/. Ще проведе първия ми тест.

Тестване от край до край с Cypress: Показване на контейнер, когато няма статии

Тъй като празна страница би била безполезна за моите потребители, по-добре е да се покаже контейнер, когато няма статии.

В новосъздадения файл мога да напиша:

describe("Knowledge Base Application", () => {
  it("Shows a placeholder when there are no articles", () => {
  cy.visit("/");
  cy.get(".list-group-item").should("have.text", "Coming Soon...");
});
});

Предполагам, че сте запознати с describeи it. Cypress използва Mocha под капака.

След това можете да видите Cypress в действие.

cy.visit() прави това, което подсказва името му: посещава URL адрес.

След това имаме cy.get()за запитване на елементи чрез селектор.

След като имаме елемент, можем да направим твърдение за него с should().

Друга страхотна характеристика на Cypress е, че много команди имат вградени твърдения. С други думи, няма нужда изрично да се твърди всичко.

Всъщност мога също да напиша горното твърдение като:

cy.get(".list-group-item").contains("Coming Soon...");

и все още имат същия резултат.

Твърдението би се провалило, ако не бъде намерен елемент, съдържащ „Очаквайте скоро..“.

В този момент първият тест е готов за изпълнение.

За да стартирате Cypress run:

node_modules/.bin/cypress open

Ще се отвори нов прозорец:

Като щракна върху app_spec.js, виждам как се случва магията:

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

Моментна снимкае друга убийствена функция на Cypress. Всяка стъпка от теста се записва от лявата страна на потребителския интерфейс.

Cypress запазва моментна снимка на DOM за всяка отделна стъпка. Така че можете да навигирате удобно през тях.

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

Тестване от край до край с Cypress: Администраторът трябва да може да влезе

Друго важно изискване за моето приложение в базата знания е възможността за влизане като администратор. В този момент не искам друг потребител.

След като администраторът влезе в системата, той трябва да бъде представен с таблото за управление. Таблото съдържа форма React JS за създаване на нова статия.

Потребители, статии. Всички тези данни са добри кандидати за срещи, нали? Какво е приспособление в тестването? Приспособление е част от статични данни, които могат да се използват по време на вашите тестове.

Фикстурите се използват за фалшифициране на JSON отговори от маршрут. Освен това те са полезни за дефиниране на потребители и модели във вашата тестова среда.

Можете да научите повече за приспособленията в Cypress, като преминете през документите: cy.fixture и Fixtures са добри отправни точки.

За моя администратор мога да създам фиксиране вътре в cypress/fixtures/users/admin.json. Приспособлението ще изглежда по следния начин:

{ 
  "name": "Valentino", 
  "email": "[email protected]", 
  "password": "secret" 
}

Имайте предвид, че е важно да имате заредени приспособления преди всеки тест. В противен случай няма да имате достъп до тях. Добра идея е да зареждате приспособления вътре в „beforeEach hook“:

describe("Knowledge Base Application", () => {
beforeEach(() => {
    cy.fixture("users/admin").as("admin");
  });
// previous test omitted for brevity
});

В Cypress можете да заредите фиксиране от набор от файлове.

Също така, приспособление може да бъде псевдоним с .as(). По-късно можете да използвате this.admin като обикновен Javascript обект.

ЗАБЕЛЕЖКА: Уверете се, че използвате обикновена функция във вашия itblock, докато осъществявате достъп до приспособления. Още по темата: функции със стрелки в Javascript и Използване на псевдоними в Cypress.

С това на място е време да добавите новия тест в блока за описание. Тестът ще изглежда така:

describe("Knowledge Base Application", () => {
beforeEach(() => {
    cy.fixture("users/admin").as("admin");
  });
// previous test omitted for brevity
it("Should be able to login: admin", function() {
    cy.visit("/login");
    
    cy
      .get('input[name="email"]')
      .type(this.admin.email)
      .should("have.value", this.admin.email);
    cy
      .get('input[name="password"]')
      .type(this.admin.password)
      .should("have.value", this.admin.password);
    cy.get("form").submit();
    cy.location("pathname").should("eq", "/home");
  });
});

Нека разбием горния тест.

Първо посещаваме страницата /login. Мога да напиша относителния път, защото Cypress улеснява конфигурирането на основния URL адрес. Така че не е нужно да го пишете отново и отново.

Базовият URL адрес е дефиниран в cypress.json (можете да го намерите в основната папка на проекта):

{ 
"baseUrl": "http://127.0.0.1:8000"
}

Също така в рамките на теста можете да видите друга команда Cypress. .type()се използва за въвеждане в DOM елемент (в този случай вход).

След това има някои твърдения за стойността, въведена във всеки вход.

Накрая изпращам формуляра с .submit().

Друго важно твърдение е направено относно пренасочването: с cy.location()можете да потвърдите, че потребителят е пренасочен към правилната страница след приключване на процеса на влизане.

След като добавя новия тест, мога просто да запазя файла и Cypress ще се погрижи за останалото. Той ще стартира отново тестовия пакет без никаква намеса:

Тестът за влизане преминава! Време е да преминем към следващото изискване: създаване и запазване на нова статия в моето приложение База знания.

Тестване от край до край с Cypress: Администраторът трябва да може да създаде нова статия

Приложението на базата знания съдържа статии, които насочват потребителя към разрешаването на прости проблеми.

Как да вмъкна статия в моето приложение?

За да създам нова статия, трябва да вляза като администратор. В моето табло за управление ще се появи React JS формуляр. Формулярът работи добре, но все още не е обхванат от автоматизиран тест.

Cypress прави тестването на React JS формуляри лесно като бриз.

Сега екипът на Cypress предоставя много съвети. Един от тях е: заобикаляне на потребителския интерфейс за влизане при изграждане на състояние по време на тестване. Можете да намерите повече тук: Не използвайте потребителския си интерфейс за влизане преди всеки тест.

Препоръчвам да следвате горните най-добри практики. Но за обхвата на тази публикация ще използвам потребителския интерфейс, за да вляза отново, преди да създам нова статия.

От какво е направен артикулът? сещам се за:

  1. заглавие
  2. тяло
  3. SEO заглавие
  4. мета описание

Всички те могат да бъдат дефинирани във фиксиране, cypress/fixtures/models/article.jsonсъс следното съдържание:

{
    "title": "Better Javascript End to End Testing with Cypress IO",
    "seo_title": "End to End Testing done right with Cypress IO",
    "seo_meta_description": "Do you want to improve your happinness as a QA engineer? Look no further",
    "body": "Are you struggling with End to End Testing? Do you want to improve your happinness as a QA engineer?"
}

Приспособлението за изделие трябва да бъде заредено преди всеки тест.

Нека актуализираме куката, за да отрази промените:

// beforeEach(() => { 
  cy.fixture("users/admin").as("admin");
  cy.fixture("models/article").as("article"); 
}); //

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

Научете как да използвате кукички тук: Тестване от край до край с Cypress: Изходни данни

Готови сте да напишете теста!

Форма на React JS може да съдържа много входове. Тест от край до край с Cypress обхваща целия процес на въвеждане във всяко поле:

it("Should be able to create a new article: admin", function() {

    cy.visit("/login");
    cy
      .get('input[name="email"]')
      .type(this.admin.email)
      .should("have.value", this.admin.email);
    cy
      .get('input[name="password"]')
      .type(this.admin.password)
      .should("have.value", this.admin.password);
   cy.get("form").submit();

// Filling up the form
    cy
      .get('input[id="title"]')
      .type(this.article.title)
      .should("have.value", this.article.title);
    cy
      .get('input[id="seo-title"]')
      .type(this.article.seo_title)
      .should("have.value", this.article.seo_title);
    cy
      .get('input[id="seo-meta-description"]')
      .type(this.article.seo_meta_description)
      .should("have.value", this.article.seo_meta_description);
    cy
      .get('textarea[id="body"]')
      .type(this.article.body)
      .should("have.value", this.article.body);
    cy.get("select").select("Published");
    cy.get("#article-form").submit();
  });

Тестът по-горе използва същите команди, които видяхме в теста за влизане. Всъщност, когато пишете и тествате End to End с Cypress, вероятно ще използвате тези 3 команди:

cy.get() за избор на елемент

.type() за бакшиш във вход

.should() за твърдение на нещо

.submit() за подаване на формуляр

Забележете как тестът се чете от всеки. Това е обикновен английски.

Като запазите файла, Cypress ще стартира тестовия пакет отново:

Колко хубаво!

Тестване от край до край с Cypress: Гостът трябва да може да види публикувана статия

Едно последно нещо, което бих искал да тествам, е способността да четете статии.

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

С Cypress е въпрос на добавяне на прост тест:

it("Should be able to see the published article: guest", function()
 {
    cy.visit("/");
    cy
      .get(".list-group-item")
      .contains(this.article.title)
      .click();
  });

Горният тест:

  1. получава елемент от .list-group-item (идва от Bootstrap 4)
  2. уверете, че елементът съдържа заглавието на статията
  3. накрая щраква върху елемента

Това е!

Тестване от край до край с Cypress: приключване

Тестването от край до край не би трябвало да е трудно.

Cypress прави интеграционното тестване приятно и приятно.

Екипът на Cypress наистина успя. Можете да започнете да пишете тестове от край до край, без да се притеснявате за браузъри, Selenium и други страшни неща.

Рамката е толкова хубава, че планирам да използвам нищо друго освен Cypress за интеграционно тестване. Започвайки от сега.

Освен това документацията е чисто злато: Cypress Docs са пълни с най-добри практики и примери.

Не на последно място, не забравяйте да опитате „Услугата на таблото за управление“.

Очаквайте още по темата!

Благодаря за четенето!

Първоначално публикувано в www.valentinog.com на 28 ноември 2017 г.