Миграция с Protractor

Принципы миграции

• Нет необходимости в "webdriver-manager" / Selenium.
• ElementFinder из Protractor ⇄ Playwright Test Locator
• waitForAngular из Protractor ⇄ авто-ожидание в Playwright Test
• Не забывайте использовать await в Playwright Test

Шпаргалка

Protractor	Playwright Test
element(by.buttonText('...'))	page.locator('button, input[type="button"], input[type="submit"] >> text="..."')
element(by.css('...'))	page.locator('...')
element(by.cssContainingText('..1..', '..2..'))	page.locator('..1.. >> text=..2..')
element(by.id('...'))	page.locator('#...')
element(by.model('...'))	page.locator('[ng-model="..."]')
element(by.repeater('...'))	page.locator('[ng-repeat="..."]')
element(by.xpath('...'))	page.locator('xpath=...')
element.all	page.locator
browser.get(url)	await page.goto(url)
browser.getCurrentUrl()	page.url()

Пример

Protractor:

describe('angularjs homepage todo list', function() {
  it('should add a todo', function() {
    browser.get('https://angularjs.org');

    element(by.model('todoList.todoText')).sendKeys('first test');
    element(by.css('[value="add"]')).click();

    const todoList = element.all(by.repeater('todo in todoList.todos'));
    expect(todoList.count()).toEqual(3);
    expect(todoList.get(2).getText()).toEqual('first test');

    // Вы написали свой первый тест, вычеркните его из списка
    todoList.get(2).element(by.css('input')).click();
    const completedAmount = element.all(by.css('.done-true'));
    expect(completedAmount.count()).toEqual(2);
  });
});

Построчная миграция в Playwright Test:

const { test, expect } = require('@playwright/test'); // 1

test.describe('angularjs homepage todo list', () => {
  test('should add a todo', async ({ page }) => { // 2, 3
    await page.goto('https://angularjs.org'); // 4

    await page.locator('[ng-model="todoList.todoText"]').fill('first test');
    await page.locator('[value="add"]').click();

    const todoList = page.locator('[ng-repeat="todo in todoList.todos"]'); // 5
    await expect(todoList).toHaveCount(3);
    await expect(todoList.nth(2)).toHaveText('first test', {
      useInnerText: true,
    });

    // Вы написали свой первый тест, вычеркните его из списка
    await todoList.nth(2).getByRole('textbox').click();
    const completedAmount = page.locator('.done-true');
    await expect(completedAmount).toHaveCount(2);
  });
});

Основные моменты миграции (см. комментарии в коде Playwright Test):

1. Каждый файл Playwright Test имеет явный импорт функций test и expect
2. Функция теста помечена как async
3. Playwright Test получает page в качестве одного из своих параметров. Это один из многих полезных фикстур в Playwright Test.
4. Почти все вызовы Playwright предваряются await
5. Создание локатора с помощью page.locator() является одним из немногих методов, которые синхронны.

Полифил waitForAngular

Playwright Test имеет встроенное авто-ожидание, которое делает ненужным использование waitForAngular из Protractor в общем случае.

Однако, это может быть полезно в некоторых крайних случаях. Вот как можно создать полифил для функции waitForAngular в Playwright Test:

1. Убедитесь, что у вас установлен protractor в вашем package.json

2. Функция полифила

   async function waitForAngular(page) {
     const clientSideScripts = require('protractor/built/clientsidescripts.js');
   
     async function executeScriptAsync(page, script, ...scriptArgs) {
       await page.evaluate(`
         new Promise((resolve, reject) => {
           const callback = (errMessage) => {
             if (errMessage)
               reject(new Error(errMessage));
             else
               resolve();
           };
           (function() {${script}}).apply(null, [...${JSON.stringify(scriptArgs)}, callback]);
         })
       `);
     }
   
     await executeScriptAsync(page, clientSideScripts.waitForAngular, '');
   }

   Если вы не хотите оставлять версию protractor, вы также можете использовать этот более простой подход с использованием этой функции (работает только для Angular 2+):

   async function waitForAngular(page) {
     await page.evaluate(async () => {
       // @ts-expect-error
       if (window.getAllAngularTestabilities) {
         // @ts-expect-error
         await Promise.all(window.getAllAngularTestabilities().map(whenStable));
         // @ts-expect-error
         async function whenStable(testability) {
           return new Promise(res => testability.whenStable(res));
         }
       }
     });
   }

3. Использование полифила

   const page = await context.newPage();
   await page.goto('https://example.org');
   await waitForAngular(page);

Суперспособности Playwright Test

Как только вы перейдете на Playwright Test, вы получите множество преимуществ!

• Полная поддержка TypeScript без необходимости настройки
• Запуск тестов на всех веб-движках (Chrome, Firefox, Safari) на любой популярной операционной системе (Windows, macOS, Ubuntu)
• Полная поддержка нескольких источников, (i)фреймов, вкладок и контекстов
• Запуск тестов параллельно в нескольких браузерах
• Встроенный сбор артефактов тестирования

Вы также получите все эти ✨ потрясающие инструменты ✨, которые поставляются в комплекте с Playwright Test:

• Playwright Inspector
• Генерация кода Playwright Test
• Playwright Tracing для постмортем-отладки

Дополнительное чтение

Узнайте больше о тестовом раннере Playwright:

• Начало работы
• Фикстуры
• Локаторы
• Утверждения
• Авто-ожидание