sample-playwright-bdd

Playwright BDD 導入検証用 (introduction)

概要 (overview)

PlaywrightとBDDの動作確認のためのサンプル

Requirement

推奨 (recommendation) node version -> newer LTS (Node Releases)

Tip

node は nvm (Node Version Manager) での導入を推奨(recommendation)

https://github.com/nvm-sh/nvm

Installation & Usage

Installation

Important

task (go-task) のインストールが必要

ない場合は taskfile.yml に定義されているコマンドを直接実行できます

例： 「task bdd-test」 npx bddgen && npx playwright test

Tip

task (go-task) の利用を推奨(recommendation)

https://github.com/go-task/task

clone files

git clone https://github.com/o-kazuhide-takahashi/sample-playwright-bdd.git

npm install

cd sample-playwright-bdd
npm i

install browser (chrome)

npx playwright install

Usage (Quick)

execute test

サンプルテスト(feature)はgoogleとyahooを表示するシナリオ

task bdd

or

npx bddgen && npx playwright test

各ブラウザについて (Usage browsers)

テストで複数のブラウザでテスト可能

例： chrome and msedge and firefox and safari(webkit)

Tip

各ブラウザについて 参考 (reference browsers)

https://playwright.dev/docs/browsers

chromium, chrome, msedge, firefox, webkit (others...)

上記を参考にブラウザをインストールする (install browser)

npx playwright install chrome
npx playwright install msedge
npx playwright install webkit

設定ファイルを変更して対象ブラウザを有効にする (activate browser)

playwright.config.ts

before (not activated)

    // {
    //   name: 'Google Chrome',
    //   use: {
    //     ...devices['Desktop Chrome'], channel: 'chrome',
    //     // storageState: process.env.BDD_PL_STORAGE_STATE_FILEPATH ?? 'tests/state.json',
    //     colorScheme: "dark",
    //     timezoneId: "Asia/Tokyo",
    //     //geolocation: {latitude: longitude: accuracy: },
    //     //permissions: ['geolocation'], // ジオロケーション(GPS)の権限を許可
    //   },
    // },

after (activated)

    {
      name: 'Google Chrome',
      use: {
        ...devices['Desktop Chrome'], channel: 'chrome',
        // storageState: process.env.BDD_PL_STORAGE_STATE_FILEPATH ?? 'tests/state.json',
        colorScheme: "dark",
        timezoneId: "Asia/Tokyo",
        //geolocation: {latitude: longitude: accuracy: },
        //permissions: ['geolocation'], // ジオロケーション(GPS)の権限を許可
      },
    },

Playwright の コード生成機能を使う (Usage Playwright Codegen)

playwrightのコード生成機能を起動 (start playwright code generator)

ファイルは tests/bdd/sample/pl_codegen/$(date '+%Y%m%d%H%M%S').ts に保存

task pl-code 

or

npx playwright codegen https://www.yahoo.co.jp/ -o tests/bdd/sample/pl_codegen/$(date '+%Y%m%d%H%M%S').ts --lang ja_JP

生成されたファイルの例 (generated example)

表示されたブラウザで、適当なニューストピックをクリック

(choice random news link in displayed yahoo japan top page)

finename: 20241026142944.ts

import { test, expect } from '@playwright/test';

test.use({
  locale: 'ja_JP'
});

test('test', async ({ page }) => {
  await page.goto('https://www.yahoo.co.jp/');
  await page.getByRole('link', { name: '衆院選 旧統一の「電話かけ」一変 NEW' }).click();
});

Reference

playwright

playwright-bdd

cucumber

Licence

MIT