Наш досвід переходу з Cypress на Playwright

Усі статті, обговорення, новини про тестування — в одному місці. Підписуйтеся на DOU | QA!

Як ми згадували в топіку з оновленнями Extensive-react-boilerplate, ми мігрували е2е-тестування з Cypress на Playwright. Прийшов час поговорити про це трішки детальніше.

На момент написання автотестів обʼєм функціонала, який треба було покрити, був невеликий. І при їх написанні використовуючи Cypress ми не стикалися із суттєвими обмеженнями.

То чому ж ми все-таки звернули увагу на Playwright? Причин декілька. Нам хотілося побачити, який фреймворк вдалося створити Microsoft та чому він набирає популярності. Також, як і у випадку з підтримкою Mongo DB, ми отримали запити від комʼюніті та колег, які б хотіли з різних причин стартувати проект на бойлерплейті саме з Playwright тестами.

Далі ми хочемо трішки поговорити про те, що нас зацікавило в процесі міграції тестів. Треба також відмітити, що так як обʼєм тестів був незначний, ми переписували тести вручну, щоб детальніше ознайомитись і заглибитись у новий фреймворк.

• І починаємо ми з документації. Тут з впевненістю можна сказати — Cypress виносить Playwright в одні ворота. Документація Cypress дуже детальна та містить масу прикладів, навчальних матеріалів, а на гітхабі існує цілий проект з прикладами для кожної дії, яку можна виконати на середньостатистиному вебсайті. Сюди ж віднесемо комʼюніті, яка у Cypress все ще більша. Досвідчений розробник може скептично віднестися до цього пункту і скоріш за все йому достатньо буде інформації, яку дає Playwright в своїй документації, але спеціалісти з меншим досвідом отримають більше задоволення освоюючи Cypress ніж Playwright.

• Продовжуємо роботу і переходимо до налаштування файла конфігурації. В нашому випадку ми не зустріли значних відмінностей. Нам знадобилось тільки налаштувати таймаути та базовий URL. З цікавого, які нові можливості дає нам тут Playwright:
  — він дає змогу налаштувати таймаут для кожного тесту включаючи тест та Before/After хуки
  timeout: 2 * 60 * 1000
  — також прямо в конфігурації є змога встановити на яких браузерах має виконуватись тестування. З відмінностей — Playwright підтримує WebKit на базі якого працює Apple Safari. Cypress такої підтримки не має.
  — перед виконанням тестів Playwright може стартувати локальний дев сервер з вашим проектом, це легко реалізується за допомогою параметра webServer

  webServer: {

command: process.env.CI

? "npm run build:e2e && npm run start"

: "npm run dev",

url: "<your url>",

reuseExistingServer: !process.env.CI,

},

• Пишемо перший тест. Різниця в синтаксисі між двома фреймворками полягає в тому, що Cypress використовує ланцюжковий (chainable) синтаксис та має свою реалізацію асинхронності. Він не підтримує async / await синтаксис, а формує чергу з команд, які мають бути виконані. Це в свою чергу впливає на роботу зі змінними — для їх збереження має використовуватись команда .then(), яка схожа на promise, але не є такою. Playwright же підтримує стандарт ECMAScript 2015 (відомий як ES6) та працює зі зручною async / await конструкцією для асинхронних функцій.

Ось як виглядає код Playwright...

test("should be successful open page and check data is displayed", async ({

page,

}) => {

await page.getByTestId("profile-menu-item").click();

await page.getByTestId("user-profile").click();

await page.waitForURL(/\/profile/);

await expect(page.getByTestId("user-name")).toHaveText(

`${firstName} ${lastName}`

);

await expect(page.getByTestId("user-email")).toHaveText(email, {

ignoreCase: true,

});

await page.getByTestId("edit-profile").click();

await page.waitForURL(/\/profile\/edit/);

await expect(page.getByTestId("first-name").locator("input")).toHaveValue(

firstName

);

await expect(page.getByTestId("last-name").locator("input")).toHaveValue(

lastName

)

...та Cypress

  it("should be successful open page and check data is displayed", () => {

    cy.getBySel("PersonIcon").click();

    cy.getBySel("user-profile").click();

    cy.location("pathname").should("include", "/profile");

    cy.getBySel("user-name").should("contain.text", firstName + " " + lastName);

    cy.getBySel("user-email").should("contain.text", email);

    cy.getBySel("edit-profile").click();

    cy.location("pathname").should("include", "/profile/edit");

    cy.get('[data-testid="first-name"] input').should("contain.value", firstName);

    cy.get('[data-testid="last-name"] input').should("contain.value", lastName);

  });

• Запускаємо виконання тестів. Тут варто сказати про архітектуру фреймворків. Cypress від інших фреймворків відрізняє те, що він виконує команди всередині браузера. І це дає йому легкий доступ до таких важливих компонентів як DOM, local storage, window обʼєктів і т.д.
  Playwright використовує архітектуру клієнт-сервер, та комунікує з браузерами через WebSocket зʼєднання.
• Після того як переписали вже всі тести, запускаємо виконуватись всю папку. І одразу бачимо, що по дефолту тести запускаються паралельно. І якщо ви при написанні тестів не дотримались правила, за яким тести мають бути незалежними від результатів один одного, то тут самий час виправити цю помилку :)
  Це також одна з відмінностей між фреймворками — Playwright запускає тести паралельно одразу за замовчуванням і безкоштовно. Сypress виконує паралелізацію тільки для різних машин, і ця функція у ньому платна.
• Коли всі тести виправлені і успішно виконуються ми звертаємо увагу на те, скільки часу займає їх виконання. І результат не на користь Cypress. Це обумовлено різною архітектурою фреймворків, про яку ми говорили вище.

Cypress. Тести виконуються за 3.82 хвилини

Playwright. Ті ж самі тести виконуються вже за 2.7 хвилин

Різниця складає 2,12 хвилини(у відсотках це 29,32%) на користь Playwright. У нас це зовсім невеликі цифри, але при збільшенні кількості тестів різниця буде тільки рости.

Мабуть, читаючи все вище написане, може виникнути питання, то чому ж ми все таки вирішили змінити фреймворк? Адже якихось суттєвих переваг ми не отрималина даний момент.

Так. Але ми звернулися до майбутнього нашого проекту та проектів, які будуть побудовані на основі бойлерплейтів з екосистеми bcboilerplates. І з цієї точки зору Playwright видався нам більш перспективним за Cypress. Паралелізація тестів, вища швидкість, можливість тестування мобільних додатків, можливість використання мов програмування крім JS та TS, а також те, що за Playwright стоїть такий великий гравець як Microsoft — все це зіграло на користь нового фреймворка.