【Playwright 】for .NETで非対応の機能を確認する

あらすじ

Playwright for .NETにて使用方法を確認したが、
Python版・Java版を含め非対応の機能がある。

→ Node.jsは、以下に対応している。
・レポート作成機能 https://playwright.dev/docs/intro#html-test-reports
・画像比較 https://playwright.dev/docs/api/class-snapshotassertions
・単体テスト https://playwright.dev/docs/test-components

チームで主に使っている言語がJavaScript(TypeScript)以外の場合、
言語学習コストをかけてまで上記の機能が必要か。
実際に使用してみる。

準備

最新版のPlaywright(Node.JS)を導入する。

cmd.exe

npm init playwright@latest

この時点で以下のサンプルが生成されるので、

tests-examples\demo-todo-app.spec.js

// @ts-check
const { test, expect } = require('@playwright/test');

test('has title', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(/Playwright/);
});

test('get started link', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Click the get started link.
  await page.getByRole('link', { name: 'Get started' }).click();

  // Expects page to have a heading with the name of Installation.
  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});

コマンドで実行する。

cmd.exe

npx playwright test

レポート機能

驚く事に、何も手を加えずこの時点でレポートが生成された。(え、こんな事ある？)

画像比較

検証の為、適当な環境を用意する。

環境に合わせてテストコードを編集する。

tests-examples\demo-todo-app.spec.js

// @ts-check
const { test, expect } = require('@playwright/test');

test('has title', async ({ page }) => {
  await page.goto('http://localhost:49155/');

  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(/Welcome to WildFly/);

  // キャプチャ撮影
  await expect(page).toHaveScreenshot();
});

test('get started link', async ({ page }) => {
  await page.goto('http://localhost:49155/');

  // Click the get started link.
  await page.getByRole('link', { name: 'Documentation' }).click();
});

1回目は怒られるが、比較対象の画像をまだ取得していない為(めげない、しょげない、泣いちゃダメ。)

WEBページの内容を一部書き換えてみる。

エビデンス

画像差分

レポート

単体テスト

言語の知識が求められそうなのでスキップする

後書き

手軽で便利な事がわかった。
画面操作コードは自動生成してアサート処理を1行書き加えるだけ...
と考えるとプロジェクトの走り始めは言語の理解も不要なので採用の価値ありです。