«Нам было достаточно небольшого объема функциональности Cypress, но мы решили обратить внимание на Playwright, по нескольким причинам. Мы хотели изучить фреймворк Microsoft, и понять причину популярности. Кроме того, как и в случае с добавлением MongoDB в наше приложение (extensive-react-boilerplate), мы получали запросы от комьюнити и коллег, которые хотели совместимости своих проектов с тестами Playwright. Начав миграцию тестов, мы поняли, что их объем незначителен. Поэтому решили переписать все тесты вручную, чтобы лучше изучить фреймворк.
Сравниваем документацию
Начнем с документации. Можно с уверенностью сказать, что документация Cypress лучше чем Playwright. В Cypress очень подробная документация, множество примеров и туториалов. Кроме того, на GitHub выложен проект с примерами теста каждого действия пользователя на стандартном сайте. Далее, комьюнити Cypress более многочисленно по сравнению с Playwright. Опытным тестировщикам, наверное, будет достаточно документации Playwright, менее опытным все-таки лучше Cypress.
Сравниваем код
Переходим к настройке конфигурационного файла. Мы не находим здесь существенных различий между двумя фреймворками. Нужно только перенастроить таймауты и базовый URL. Также посмотрели новые возможности Playwright:
- Установка таймаутов для каждого теста, включая хуки
Before/After:
// playwright.config.ts
export default defineConfig({
...
timeout: 2 * 60 * 1000,
...
});
- Playwright поддерживает WebKit / Apple Safari, а Cypress нет
Playwright перед запуском тестов может запускать локальный development-сервер с проектом, что легко реализуется параметром webServer:
webServer: {
command: process.env.CI
? "npm run build:e2e && npm run start"
: "npm run dev",
url: "http://127.0.0.1:3000",
reuseExistingServer: !process.env.CI,
},
Разница в синтаксисе заметна. Cypress использует «цепной» синтаксис и имеет собственную реализацию асинхронности; 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, локальное хранилище и оконные объекты. Playwright построен на клиент-серверной архитектуре и взаимодействует с браузерами через WebSocket-соединение.
- Переписав все тесты, мы запустили их и заметили, что по умолчанию Playwright выполняет тесты параллельно, причем предоставляя эту возможность бесплатно. В отличие от него, Cypress выполняет распараллеливание только для разных машин, и это платная функция.
- Выполнение одинаковых тестов в обоих фреймворках показало, что Playwright выполняет тесты чуть быстрее, чем Cypress.
Мы выполнили тесты и обнаружили, что Playwright выполнил их за 2,7 минуты:
В то время как Cypress выполнял 3,82 минуты, показав некоторую разницу во времени в пользу Playwright.
Выводы
Учитывая вышесказанное, можно задаться вопросом, почему мы все-таки решили сменить фреймворк, если разница не сказать что существенная. Хотя на тот момент мы не видели особых преимуществ Playwright, мы принимали во внимание масштабирование текущего проекта, да и других потенциальных проектов, которые будут построены в нашей экосистеме bcboilerplates для React. С этой точки зрения Playwright показался более перспективным, благодаря распараллеливанию тестов, скорости выполнения, возможности тестирования мобильных приложений, возможности использовать другие языки программирования кроме JS и TS, и поддержке Microsoft.»
