プレイライトとDockerによるE 2 Eテスト:ADHERサンプル積分

Playwright Webアプリケーションのエンドツーエンド(E 2 E)テストの作成とメンテナンスを簡素化するモダンなフレームワークです.E 2 Eのテストソリューションの風景は、正直で、すでにツールやフレームワークが豊富ですが、脚本家は、いくつかの特徴的な機能(クロスプラットフォーム、クロスブラウザ、クロス言語)と強力なメンテナ(マイクロソフト)でパーティーに参加しています.
このブログ記事は、特定の焦点を当ててDockerと一緒に脚本家を使用する秘密と実践を紹介します.

公式脚本家のイメージを使用して

ビルドしてカスタム脚本家のイメージを実行する

CI/CDパイプラインのPlaywright Dockerイメージを統合する方法

The article shares some of the lesson learnt by implementing E2E testing of the Adyen Sample integrations with Playwright, Docker and GithubActions

脚本テスト事件

最初に、それがどのように書かれて、実行されるかを理解する簡単なテストを見ましょう.

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

test('Card', async ({ page, baseURL }) => {     
   // check page title
   await page.goto('/');     
   await expect(page).toHaveTitle(/Checkout Demo/);  
   // click on button  
   await page.locator('text="Card"').click();    

テストは様々なもので書くことができるlanguages とコマンドラインからnpx playwright test .

脚本家のイメージを使用して

PlayWrightは、利用できるイメージを作りますDocker Hub これにはノード、すべての必要な依存関係、ブラウザが含まれます.余分な設定を必要とせずに、あらかじめ設定された環境でテストを実行することは非常に便利です.
プロジェクトのルートでPlayWrightイメージを実行します.仮定は、テストコードがtests ディレクトリ

# run in the root of your Playwright project
docker run -v $PWD:/tests -w /tests --rm -it mcr.microsoft.com/playwright:v1.16.2-focal /bin/bash

Note the image tag focal for Ubuntu 20.04 (Focal Fossa): although there are other options (ie Ubuntu 18.04 Bionic Beaver) this works fine on Mac and Github Actions.

上記のコマンドは、PlayWright環境をホストするコンテナー内の対話的なbashセッションを開始します.アプリケーションの依存性を追加するコマンドを実行し、ブラウザをダウンロードしてテスト実行を開始します.

npm install : アプリケーションのすべての依存関係をローカルのNodeRuleモジュールフォルダにインストールします.

npx playwright install : サポートされているブラウザをインストールします.

npx playwright test : すべてのテストを実行します.

# you are now inside the container (bash)
root@f4cfe077964d:/e2e# npm install

root@f4cfe077964d:/e2e# npx playwright install

Downloading Playwright build of chromium v939194 - 138.4 Mb [====================] 100% 0.0s
Playwright build of chromium v939194 downloaded to /ms-playwright/chromium-939194
Downloading Playwright build of firefox v1304 - 73.6 Mb [====================] 100% 0.0s
Playwright build of firefox v1304 downloaded to /ms-playwright/firefox-1304
Downloading Playwright build of webkit v1578 - 58.7 Mb [====================] 100% 0.0s
Playwright build of webkit v1578 downloaded to /ms-playwright/webkit-1578

root@a818ca0fe10a:/e2e# npx playwright test

いくつかのヒント

いくつかの有用なカスタマイズを見てみましょう.

ターゲットの設定

テスト対象のアプリケーションのURLをplaywright.config.js . ハードコードを使うのは決して良い考えではありませんが、環境変数を読むために、環境変数(例えばlocalhostやステージングサーバ)に対してテストする柔軟性を保つことを目指しています.

use: {
  // bad idea
  // baseURL: 'http://localhost:8080',
  // good idea
  baseURL: process.env.URL || 'http://localhost:8080',

実行時にURL値を定義するのは簡単です.

root@a818ca0fe10a:/e2e# URL=http://myapp.com npx playwright test

選択拡張のインストール

テストが選択されたブラウザでのみ実行されなければ、すべての拡張モジュールをインストールする必要はありません.

root@a818ca0fe10a:/e2e# npx playwright install chromium

選択テスト

単一のテストを指定します.

# test named dropin or starting with dropin
root@a818ca0fe10a:/e2e# npx playwright test dropin

localhostに対するテスト

ほとんどの場合、開発中のアプリケーション(IDEで)はlocalhost上で動作していますが、PlayWright Dockerコンテナをテストするときにはトリッキーになります.

root@a818ca0fe10a:/e2e# curl -I http://localhost:8080
curl: (7) Failed to connect to localhost port 8080: Connection refused

どうした?localhostが到達できない理由はDocker Networking : コンテナの中からのlocalhostはホストに解決しません--network=host パラメータ).
最初の回避策はhost.docker.internal 常に利用可能なアドレス.

root@a818ca0fe10a:/e2e# curl -I http://host.docker.internal:8080
HTTP/1.0 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 5345
Server: Werkzeug/2.0.2 Python/3.8.2
Date: Tue, 22 Mar 2022 16:24:46 GMT

もう一つの(少しより多くの面倒な)回避策は、ホスト(あなたのマシン)のIPアドレスを新しく定義されたホスト名でマップすることですdocker ).

# get IP
ipconfig getifaddr en0
xxx.xxx.xxx.xxx
# docker run adding host `docker`
docker run -v $PWD:/tests --add-host=docker:xxx.xxx.xxx.xxx -w /tests --rm -it mcr.microsoft.com/playwright:v1.16.2-focal /bin/bash
# host `docker` resolves to host
root@a818ca0fe10a:/e2e# curl -I http://docker:8080
HTTP/1.0 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 5345
Server: Werkzeug/2.0.2 Python/3.8.2
Date: Tue, 22 Mar 2022 16:24:46 GMT

Important note in case of developing an Adyen integration: any chosen URL must be specified in the Allowed-Origin list to ensure the client-side requests are authorised

独自のカスタム脚本家のイメージを作成する

もう一つのオプションは、“焼く”構成、依存性とテストをすべて一緒にカスタムplaywright Dockerイメージを作成することです.

FROM mcr.microsoft.com/playwright:v1.16.2-focal

# copy project (including tests)
COPY . /e2e

WORKDIR /e2e

# Install dependencies
RUN npm install
# Install browsers
RUN npx playwright install

# Run playwright test
CMD [ "npx", "playwright", "test", "--reporter=list" ]

テストスイートは、Dockerイメージを実行し、任意のenv変数(すなわち、アプリケーションのURL)を実行することができます.

docker build -t custom-playwright .
docker run -it --rm -e URL=http://myapp.com --name customplaywright custom-playwright
Running 5 tests using 2 workers
✓  [chromium] › card.spec.js:5:1 › Card (3s)
  ✓  [chromium] › card2.spec.js:5:1 › Card2 (3s)
  ✓  [chromium] › dropin.spec.js:5:1 › Dropin SEPA (2s)
  ✓  [chromium] › ideal.spec.js:4:1 › iDEAL (2s)
  ✓  [chromium] › webhook.spec.js:5:1 › Webhook Notification (198ms)

CI / CDにおける脚本家E 2 E

しかし、CI/CDパイプラインでE 2 Eテストを入れたいなら、それは刺激的になります.ミートAdyen Sample integrations !

支払いチェックアウトの例

サンプルの統合は、Adyenプラットフォームとの支払いチェックアウトの作業例です.これは、支払い方法が表示され、実行する方法を示し、シンプルで効果的なオープンソースアプリケーションです.

様々な言語とフレームワークをadyenプラットフォームをサポートすると、私たちは、UIと機能の点で似ているが、異なるバックエンドで12以上のサンプルを維持します.したがって、複数のアプリケーションを検証するための単一のテストスイートを定義することができます.
我々は効果的にオンテスタアプリケーションとテストされているアプリケーションを実行する環境でオンザフライで作成しました.自動化されたテストの終わりに、環境はもはや存在しません.

githubactionsを見ましょうworkflow これらのアプリケーションのうちの1つです.

最初にソースコードをチェックアウトし、Dockerイメージを構築し、それを実行します8080

ポート上のアプリケーションのリスニングをターゲットにしたテストスイートのドックイメージをプルして実行する8080

name: E2E (Playwright)

on:
  push:
  pull_request:
    branches: [ main ]

jobs:
  checkout:
    runs-on: ubuntu-latest
    steps:
      # checkout application code
      - name: Checkout project
        uses: actions/checkout@v2
      # build application Docker image
      - name: **Step 1: build image (application)**
        run: docker build -t test-image:latest .
      # run application Docker image
      - name: **Step 2: start container (application)**
        run: docker run --rm -d --name test-image -p 8080:8080 -e ADYEN_API_KEY="${{ secrets.ADYEN_API_KEY }}" -test-image:latest
      - name: **Step 3: run Testing Suite container**
        # run testing suite Docker image
        run: docker run --rm --name adyen-testing-suite --network host ghcr.io/adyen-examples/adyen-testing-suite:latest

結論

私は記事がDockerと若干の光を放つのを助けることを望みます.ここで貴重なテイクアウトは、Dockerを使用して、開発環境とCI/CDエンジン間でカスタムE 2 Eワークフローポータブルを設計することが可能です.
あなたが記事を楽しんでいるならば、より多くの記事とチュートリアルのために、そして、続きます.ハッピーテスト!

参考文献

アドオンの統合サンプルGithub
アドオンテストスイートGithub
Dockerの脚本家page