メインコンテンツへスキップ

Protractor からの移行

移行の原則​

チートシート​

ProtractorPlaywright 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.allpage.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 Test ランナーについてもっと知る