Support Online
MirrorLooking Glass
GenixNodeGenixNode
Client Panel
Skip to main content

Playwright Test Automation: Running End-to-End Tests with Docker

How to write end-to-end tests using Playwright and TypeScript,
You will learn how to isolate the testing environment with Docker and integrate test automation into the CI/CD process.

🧠 What Will You Learn in This Guide?​

  • Using Playwright testing tool with TypeScript
  • Ensuring consistency across different systems by isolating the test environment
  • Running E2E tests within the Docker image
  • Generate HTML and JSON test reports
  • Integrating tests into CI/CD processes

1️⃣ Preparing the Test Environment​

Step 1.1 — Creating the Project Directory​

mkdir genixnode-playwright-test
cd genixnode-playwright-test
npm init -y

These commands create the project folder and create the default package.json file.

Step 1.2 — Installing Playwright and TypeScript​


npm install --save-dev playwright
npm install --save-dev typescript @types/node toml @playwright/test

These commands; It installs the Playwright core, TypeScript compiler, Node type definitions, and TOML configuration library.

Step 1.3 — Installing Playwright Browsers and Dependencies​


npx playwright install-deps
npx playwright install

These commands install system dependencies and download Chromium, Firefox, Webkit browsers.

Step 1.4 — TypeScript Configuration​


nano tsconfig.json

Content:


{
  "compilerOptions": {
    "strict": true,
    "module": "commonjs"
  },
  "include": ["tests"]
}

These settings ensure that the TypeScript compiler performs strict type checking and only compiles files in the tests folder.

2️⃣ Writing Tests​

Step 2.1 — Test Folder and Configuration​


mkdir tests
cd tests
nano configTypes.ts

Content:


import { Browser, Page } from "playwright";
import fs from "fs";
import toml from "toml";
const config = toml.parse(fs.readFileSync("./config.toml", "utf-8"));

declare global {
  const page: Page;
  const browser: Browser;
  const browserName: string;
}

export default {
  RABISU_TEST_URL: config.genixnode_test_url ?? "",
};

This file defines the global variables to be used in the tests and reads the URL information from the config.toml file.

Step 2.2 — Defining the Test URL​


cd ..
nano config.toml

Content:


genixnode_test_url = "https://www.digitalocean.com/products/droplets"

This file specifies the URL that the tests will access (you can change the example to example.com).

Step 2.3 — Testing Recording Methods​

tests/recordMethods.spec.ts:


import endpoint from "./configTypes";
import { test, expect } from "@playwright/test";

test("Kayıt olmak için 3 farklı seçeneğin bulunmasını bekler", async ({ page }) => {
  await page.goto(endpoint.RABISU_TEST_URL);
  await page.waitForLoadState("networkidle");
  const kayit_secenek_sayisi = await page
    .locator(".SignupButtonsStyles__ButtonContainer-sc-yg5bly-0 > a")
    .count();
  expect(kayit_secenek_sayisi).toBe(3);
});

This test verifies that registration options with email, Google, and GitHub are available.

Step 2.4 — Packet Count Test​

tests/packetSayisi.spec.ts:


import endpoint from "./configTypes";
import { test, expect } from "@playwright/test";

test("Abonelik için 2 ana paket (Basic ve Premium) bulunmasını bekler", async ({ page }) => {
  await page.goto(endpoint.RABISU_TEST_URL);
  await page.waitForLoadState("networkidle");
  const mevcut_paket_sayisi = await page
    .locator(".CPUInfoStyles__StyledLeftCpuInfo-sc-ooo7a2-4 > div")
    .count();
  expect(mevcut_paket_sayisi).toBe(2);
});

This test verifies that the number of basic and premium packages on the page is 2.

Step 2.5 — Price Comparison Test​

tests/priceComparison.spec.ts:


import endpoint from "./configTypes";
import { test, expect } from "@playwright/test";

test("Temel sanal sunucu maliyetlerinde 4 farklı CPU seçeneği bulunmasını bekler", async ({ page }) => {
  await page.goto(endpoint.RABISU_TEST_URL);
  await page.waitForLoadState("networkidle");
  const cpu_secenek_sayisi = await page
    .locator(".PricingComparisonToolStyles__StyledCpuSelector-sc-1k0sndv-7 > button")
    .count();
  expect(cpu_secenek_sayisi).toBe(4);
});

This test checks the number of CPU options 1, 2, 4 and 8.

3️⃣ Running and Reporting Tests​

Step 3.1 — Run Tests in All Browsers​


npx playwright test --browser=all

This command runs all .spec.ts files on Chromium, Firefox and Webkit.

Step 3.2 — Creating an HTML Report​


npx playwright test --browser=all --reporter=html
npx playwright show-report

These commands save the test results as an HTML report and display them at http://localhost:9323.

To access on the remote server:


ssh -L 9323:localhost:9323 user@sunucu_ip

This provides access to the report from the local browser.

4️⃣ Test Automation with Docker​

Step 4.1 — Update package.json​


{
  "scripts": {
    "test": "playwright test --browser=all",
    "test-html-report": "playwright test --browser=all --reporter=html",
    "test-json-report": "PLAYWRIGHT_JSON_OUTPUT_NAME=results.json playwright test --browser=chromium --reporter=json"
  }
}

These scripts shorten test commands and make them easier to run in Docker.

Step 4.2 — Creating Dockerfile​


FROM mcr.microsoft.com/playwright:focal
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH

COPY package.json /app/
COPY tests/ /app/tests/
COPY tsconfig.json /app/
COPY config.toml /app/

RUN npm install

This Dockerfile contains all the necessary dependencies to run Playwright tests in the Node environment.

Step 4.3 — Compiling the Docker Image and Running the Test​


docker build -t playwright-genixnode-test .
docker run --rm playwright-genixnode-test:latest npm run test

The Docker image is created and the tests are run in an isolated container.

Expected output:

✓ 9 test geçti (41s)

❓ Frequently Asked Questions (FAQ)​

  1. Why are End-to-End (E2E) Tests important?

It simulates real user scenarios, verifying that the system works end-to-end.

  1. What problem does using Docker solve in testing?

Isolates incompatibilities in different environments. It eliminates the problem of “It works for me but it doesn't work on the server”.

  1. What is the difference between Playwright and Selenium?

Playwright supports modern browser architectures, no driver installation required, supports three browsers including WebKit.

  1. How to do CI/CD integration?

The docker run playwright-genixnode-test:latest npm run test command is added to the pipeline. Tests run automatically after each push.

  1. Why do we use TOML?

Simple, readable and ideal for configuration. It offers clearer syntax than JSON.

🏁 Result​

With Playwright, you can get the same results on different systems by encapsulating your end-to-end test automation with Docker.

By applying this structure on your GenixNode virtual servers, you can make your software development processes automatic and reliable. 🚀

💡 Try it on GenixNode platform now!