playwrightを使用してブラウザのテストを自動化する方法について

ブラウザの品質を保つためには、信頼性の高いテストが不可欠です。テストの信頼性や効率性を向上させたい人向けに、playwrightを使用したブラウザのテストを自動化する方法についてご紹介します。

playwrightとは

playwrightは、ブラウザのシステムに対して信頼性の高いテストをすることができるツールです。多くのブラウザ(Chromium, WebKit, FireFox)やプラットフォーム(Windows, Linux, MacOS)に対応しており、環境毎のテストが可能です。playwrightを使用すると、安定したテストを実現することが可能です。例えばテストするブラウザがページ遷移や読み込みしている間は、テストが適切なタイミングで実行されるように待機させることが容易に可能であるため、信頼性と正確性の高いテストができます。

環境構築

プラットフォーム:MacOS
Node:v20.7.0
Npm:v10.1.0
Npx:v10.1.0
Playright: 1.44.1
YAML: 2.4.5

1.NodeとNpmをインストール
brew install node
2.プロジェクトを用意
mkdir 任意名
3.作成したプロジェクトに移動してNodeプロジェクトを初期化
npm init -y
4.playwightをNodeプロジェクトにインストール
npm install playwright
5.Playwrightが使用するブラウザをインストール
npx install playwight
6.yamlをNodeプロジェクトにインストール
npm install yaml
7.テストを実行するjsファイルを用意
touch sample.js
8.テスト結果を記録するtxtファイルを用意
touch result.txt

ディレクトリ構成

プロジェクト名
├── node_modules
│   ├── playwright
│   ├── yaml
├── sample.js
├── result.txt
└── package.json 

node_modules:Nodeプロジェクトで使用するパッケージがインストールされるディレクトリ
sample.js:ブラウザのテストをするファイル
result.txt:テスト結果を記録するファイル
package.js:Nodeプロジェクトの設定ファイル

テストの実装

商品一覧のブラウザの動作テストを、playwrightでテストを自動化します。テスト内容は、特定の情報を取得し、取得したデータが条件に一致しているかのテストをします。

作業内容

  1. 商品一覧ページに移動。
  2. 特定の商品を検索
  3. 表示された商品のデータを取得
  4. 取得したデータが指定した条件に一致しているかテスト
  5. 取得したデータを実行結果に格納
  6. 実行結果をテキストファイルに書き込み
const { chromium } = require('playwright');
const fs = require('fs');
const YAML = require('yaml');

// テスト結果
const result = {
    status: '未実行',
    startTime: new Date(),
    getData: {},
    message: '',
};

(async () => {
    // テスト実行
    let browser;
    try {
        // ブラウザ起動
        browser = await chromium.launch();
        // ページを作成
        const page = await browser.newPage();
        // 指定したURLに移動
        await page.goto('テストするブラウザのURL');
        // 指定したクラスの要素の中にある<a>要素を取得してクリック
        await page.locator('.market a').first().click();

        // 検索したいワードを入力して、検索ボタンをクリック
        await page.locator('.search-word').fill('服');
        await page.locator('.search').first.click();

        // 指定したクラスに一致する要素を全て取得
        const products = await page.locator('.product').elementHandles();
        // テスト結果に取得した商品のデータを挿入する要素を用意
        result.getData.products = [];
        for (const product of products) {
            // 各商品の名前と価格の要素を取得
            const productNameElement = await product.$('p.name');
            const productPriceElement = await product.$('p.price');
            // 取得した要素の文字列の取得
            const name = await productNameElement.innerText();
            const price = await productPriceElement.innerText();
            if (5000 < Number(price)) {
                // 取得したデータをテスト結果に格納
                result.getData.products.push({ name: name, price: price });
            }
            else {
                throw { message: `取得した要素の値が条件と不一致 (name: ${name}, price: ${price})` };
            }
        }
        result.status = '成功';
    }
    catch (e) {
        // エラー時の結果をテスト結果に格納
        result.status = '失敗';
        result.message = e.message;
    }
    finally {
        // 起動したブラウザを閉じる
        if (browser) {
            await browser.close();
        }
    }

    // テスト結果を保存
    try {
        // 実行結果を格納するファイルを取得
        const text = fs.readFileSync("test.txt", { encoding: 'utf8' });
        // 結果データをオブジェクトから文字列に変更
        const addText = YAML.stringify(result) + '-----------------------------';
        // 結果データを書き込み
        fs.writeFileSync('test.txt', text.length ? text + '\n' + addText : addText);
    }
    catch (e) {
        console.error(e);
    }
})();

実行してみる

環境構築と実行するファイルを用意したので、テストをしてみます。
テストファイルを実行
node sample.js

実行結果はresult.txtに保存されているので確認してみましょう
status:テスト結果
startTime:テスト実行開始時間
getData:取得したデータを管理
message:メッセージ


playwright実行結果

※2回テストを実行しており、’------------’でテスト結果を区切っています。
1回目のテストでは正常にテストされ取得したデータに問題ないことを確認できます。
2回目のテストでは正常にテストはされたが、取得したデータに問題がありテスト失敗していることを確認できます。

まとめ

今回、環境構築からテストの実装を試してみました。ページ遷移やボタンクリック、値入力とデータを取得するテストの自動化する方法について学べたかなと思います。
playwrightでは、要素が表示か非表示になっているかの確認やブラウザをスクリーンショットすることが可能で幅広くブラウザのテストを自動化することが可能なツールとなっています。

テストの自動化をお考えなら『クラウドBOT』をお試しください

クラウドBOTはブラウザ操作を自動化できるクラウド型のRPAサービスです。複雑な環境構築をが不要であり、会員登録すると無料でブラウザ操作を自動化するロボットを作成できます。ロボットは基本的にノーコードで構築できますが、複雑な処理を行いたい場合は、javascriptを直接記述し、実行させることもできます。
テストの自動化を検討されている方は是非一度お試し下さい。


クラウド型RPAについてもっと詳しく


  1. クラウド型RPAを低価格で導入!そもそもRPAとは?導入ニーズが高まった背景 無料体験も実施!活用事例も参考に
  2. クラウド型RPAを導入するメリットとは?専門知識がなくても簡単に活用できるのが魅力
  3. クラウド型RPAツールを無料体験!代表的なRPA製品「オンプレミス型」と「クラウド型」について
  4. クラウド型RPAツールの導入事例をご紹介!RPAツールの選定ポイント 使い方簡単で格安
  5. iPaaS製品の必要性 iPaaSとの連携が可能なクラウド型RPA『クラウドBOT』 無料プランから利用可能!初めての方は事例を参考に
  6. iPaaS製品とRPAツールの違い 日本でも普及が広がる!iPaaSを導入するメリット
  7. SaaSを連携させてワークフローの自動化・効率化を実現!クラウドサービス「SaaS」の連携手段とクラウド型のRPAツールを利用した連携
  8. SaaSの連携に有用な2製品「iPaaS」と「クラウド型RPA」とは SaaSの連携なら各APIに対応可能◎活用事例も多い『クラウドBOT』の導入を
  9. webブラウザ操作の自動化なら『クラウドBOT』 RPAツールで自動化・効率化できる業務 データ抽出を効率化するなら
  10. webブラウザ操作の自動化ならプログラミング不要で更新も手間いらずの『クラウドBOT』 自動化できる操作をご紹介
  11. ブラウザ操作を自動化する『クラウドBOT』は、日常的に行っているブラウザ操作をノーコードで自動化する事ができます
  12. ブラウザを自動操作する方法 - 『クラウドBOT』を使用して、ブラウザを自動操作する方法を解説します。
  13. Google Chromeのを自動操作するならインストール不要・プログラミング不要で自動操作を実化できる『クラウドBOT』がおすすめ
  14. 初心者でも簡単に使えるおすすめのRPAツール3選 | RPAの選定ポイントについても解説
  15. ブラウザのスクリーンショット撮影を自動化する方法をご紹介
  16. Seleniumを使ってWebスクレイピングを行う方法について
  17. Web上の業務を効率化できるツールをご紹介 | iPaaS、RPAの違いとは
  18. 総務におすすめRPA活用事例をご紹介 | クラウド型RPA活用事例
  19. ブラウザ上で行っている業務を効率化できるおすすめツール3選
  20. PuppeteerとNode.jsを使用してブラウザ操作を自動化する方法
  21. Selenium×pythonでWebスクレイピングを実現する方法(ソースコード付き) | Seleniumとpythonの環境構築と実行手順も解説
  22. クラウド型RPAを用いたカートシステムとWMSのデータ連携事例をご紹介 | ローコストで始める受注データの連携、出荷データの連携
  23. Chromeの拡張機能を使用してWebページのスクリーンショット撮影する方法
  24. Playwrightを使用して、Webページのスクリーンショット撮影を行う
  25. 無料で使えるおすすめのRPAをご紹介 | 無料RPAのメリット・デメリットや選定基準も解説
  26. APIがないWebシステムとデータ連携する方法
  27. Puppeteerを使用してテストを自動化する方法
  28. 簡単にできる!Webサイト画像の一括ダウンロードガイド
  29. 税理士・会計士におすすめ!RPA活用事例 RPAを使って業務効率改善を
  30. RPAとAIの組み合わせ事例をご紹介 | RPA、AIのそれぞれの特徴と組み合わせで実現できる自動化について解説
  31. playwrightを使用してブラウザのテストを自動化する方法について