Playwrightを使ったE2E_GUIテスト自動化（環境構築）

5392 ワード
Playwright JavaScript JavaScript テキストリンク

​​​​今回はSeleniumのように無償で利用できるテスト自動化ライブラリ「Playwright」について紹介させていただきます。
本記事では、Playwrightのインストールと動作確認までの記事となります。

今後、使い方やちょっとした応用編の記事を自分用としても投稿しようと考えています。

1.はじめに

Playwright とは、Microsoftが中心になって開発するNode.js上からブラウザを操作するためのライブラリです。
https://github.com/microsoft/playwright​​​​​​​
2020年冬にリリースされ、以下の言語とブラウザに対応しています。

言語 対応ブラウザ
JavaScript Chrome
TypeScript Edge
Python Firefox
C# Safari

2.Playwright_環境構築

PlaywrightはNode.jsをベースとして動くライブラリのため、下記のものをインストールする必要があります。

本稿では、下記のバージョンでPlaywrightを使って解説していきます。

環境
Windows 10 20H2
Node.js v14.15.4
npm 6.14.10

3.インストール

1.作業用フォルダを任意の場所に作成する
2.コマンドプロンプトを起動し、作業用フォルダに移動する
3.下記コマンドを実行する

$ npm init -y

4.作業用フォルダ内に、「package.json」が作成されていることを確認する
5.確認後、下記コマンドを実行する

 $ npm install -D playwright

6.動作用のスクリプトファイルを作成する。(test.js　内容は以下をコピペする)

test.js
 const { chromium } = require('playwright');

 (async () => {
     const browser = await chromium.launch();
     const page = await browser.newPage();
     await page.goto('https://www.whatismybrowser.com/');
     await page.screenshot({ path : 'example.png'});
     await browser.close();
 })();

7.コマンドプロンプトから下記のコマンドを実行し、動作確認を行う

$ node test.js

4.キャプチャリプレイ

Playwrightでは、ユーザー操作を記録しコードを自動生成する機能があります。
この機能ではChromiumをデフォルトとしてブラウザを起動しコード生成を行います。
以下の操作手順のコードを自動生成したいと思います。

【記録する手順】
１．WikipediaのTOPページを開く
２．検索欄に[ test ]と入力し検索
３．[ ソフトウェアテスト ]の項目(link)をクリックする

【作成手順】
1.コマンドプロンプトを起動
2.作業用フォルダの場所へ移動
3.以下のコマンドを実行

$ npx playwright codegen "URL"

※”URL”には、テスト対象のWebページのURLを記述してください
（例えば、Wikipediaだと$ npx playwright codegen "https://ja.wikipedia.org/wiki"　
4.ブラウザが起動するので、操作を行う
操作を行うと右側にplaywrightの画面が表示され操作を記録されます
5.記録画面のコードをコピーし、ブラウザを閉じる

5.おわりに

今回は環境構築とキャプチャリプレイでのコード生成について執筆しました。
次回以降はコーディングでのPlaywrightスクリプト生成（Web要素の識別、アサーションなど）を執筆しようと思います。

-以上