Protractor からの移行

移行の原則

• "webdriver-manager" / Selenium は不要です。
• Protractor の ElementFinder ⇄ Playwright Test Locator
• Protractor の waitForAngular ⇄ Playwright Test の 自動待機
• Playwright Test では await を忘れないでください

チートシート

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');

    // You wrote your first test, cross it off the list
    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,
    });

    // You wrote your first test, cross it off the list
    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 には、パラメーターの1つとして page が与えられます。これは、Playwright Test の多くの便利なフィクスチャの1つです。
4. ほとんどすべての Playwright 呼び出しには await がプレフィックスとして付けられます。
5. page.locator() を使用したロケーターの作成は、同期メソッドの数少ない1つです。

waitForAngular のポリフィル

Playwright Test には、Protractor の waitForAngular が一般的なケースでは不要になるように、組み込みの自動待機機能があります。

しかし、いくつかのエッジケースでは役立つかもしれません。ここでは、Playwright Test で waitForAngular 関数をポリフィルする方法を紹介します。

1. package.json に protractor がインストールされていることを確認してください。

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 インスペクター
• Playwright Test のコード生成
• 事後デバッグのためのPlaywright Tracing

さらに読む

Playwright Test ランナーについて詳しく学ぶ

• はじめに
• フィクスチャ
• ロケーター
• アサーション
• 自動待機