CI/CD +playwright

 

Playwright CI/CD Using Azure DevOps (ADO) – Step by Step

---

Step 1: Prerequisites

Make sure you have:

• Azure DevOps project

• Git repo with Playwright framework

• Node.js (LTS) configured locally

• Playwright project already working locally

---

Step 2: Repo Structure (Minimum Required)

playwright-automation/
├── tests/
├── pages/
├── playwright.config.ts
├── package.json
└── azure-pipelines.yml

---

Step 3: Create Azure Pipeline YAML

📁 azure-pipelines.yml

trigger:
- main

pool:
  vmImage: 'ubuntu-latest'

steps:

# Step 1: Checkout code
- checkout: self

# Step 2: Install Node.js
- task: NodeTool@0
  inputs:
    versionSpec: '18.x'
  displayName: 'Install Node.js'

# Step 3: Install dependencies
- script: |
    npm ci
  displayName: 'Install dependencies'

# Step 4: Install Playwright browsers
- script: |
    npx playwright install --with-deps
  displayName: 'Install Playwright Browsers'

# Step 5: Run Playwright tests
- script: |
    npx playwright test
  displayName: 'Run Playwright Tests'
  env:
    BASE_URL: 'https://qa.example.com'

# Step 6: Publish HTML Report
- task: PublishPipelineArtifact@1
  inputs:
    targetPath: 'playwright-report'
    artifact: 'PlaywrightReport'
    publishLocation: 'pipeline'
  displayName: 'Publish Playwright Report'

---

Step 4: Commit & Push

git add .
git commit -m "Add ADO CI pipeline for Playwright"
git push origin main

---

Step 5: Create Pipeline in Azure DevOps

1. Go to Azure DevOps → Pipelines

2. Click New Pipeline

3. Select Azure Repos Git

4. Choose your repository

5. Select Existing Azure Pipelines YAML

6. Choose azure-pipelines.yml

7. Click Run

---

Step 6: Verify Pipeline Execution

Pipeline stages:

1. Checkout repo

2. Install Node.js

3. Install dependencies

4. Install browsers

5. Execute tests

6. Publish report

---

Step 7: View Test Report

1. Open completed pipeline run

2. Go to Artifacts

3. Download PlaywrightReport

4. Open index.html

---

Step 8: Enable Parallel Execution (Optional)

- script: |
    npx playwright test --workers=4

---

Step 9: Add Environment Variables

Use ADO → Library → Variable Groups

env:
  BASE_URL: $(BASE_URL)
  USERNAME: $(USERNAME)
  PASSWORD: $(PASSWORD)

✔ Secure credentials
✔ Environment-based execution

---

Step 10: Schedule Nightly Runs

1. Go to Pipeline → Triggers

2. Enable Scheduled runs

3. Example: nightly at 2 AM

---

Step 11: Best Practices (Real Projects)

✔ Use npm ci not npm install
✔ Store secrets in variable groups
✔ Retry flaky tests
✔ Publish reports always
✔ Run smoke tests on PRs

---

Playwright

A–Z Playwright Commands & APIs

A

• await page.goto(url) – Navigate to a page

• await page.addInitScript() – Add script before page loads

• await page.authenticate() – HTTP authentication

B

• npx playwright build-deps – Install system dependencies

• browser = await chromium.launch() – Launch browser

• browser.newContext() – Create isolated browser context

C

• npx playwright codegen – Generate test code automatically

• context.newPage() – Open new page

• page.click(selector) – Click element

• page.check(selector) – Check checkbox

D

• npx playwright debug – Debug tests

• page.dblclick(selector) – Double click

• page.dragAndDrop(source, target)

E

• expect(locator).toBeVisible() – Assertion

• page.evaluate() – Run JS in browser

• page.exposeFunction() – Expose Node function to browser

F

• page.fill(selector, value) – Fill input

• page.focus(selector)

• page.frame(nameOrUrl)

G

• page.getByText() – Locate by text

• page.getByRole() – ARIA-based locator

• page.goBack() / page.goForward()

H

• page.hover(selector)

• page.route() – Network mocking

• page.waitForResponse()

I

• npx playwright install – Install browsers

• page.isVisible(selector)

• page.innerText(selector)

J

• page.keyboard.press('Enter')

• page.keyboard.type()

K

• page.keyboard.down() / up()

L

• page.locator(selector) – Preferred locator

• page.reload()

M

• page.mouse.move()

• page.mouse.click()

• page.mouse.wheel()

N

• npx playwright test – Run tests

• page.newPage()

• page.routeFromHAR()

O

• page.once('dialog')

• page.opener()

P

• page.pause() – Pause test execution

• page.pdf() – Generate PDF

• page.press(selector, key)

Q

• page.querySelector() (rare, use locator instead)

R

• npx playwright test --reporter=html

• page.route() – Intercept network

• page.reload()

S

• page.screenshot()

• page.selectOption()

• page.setViewportSize()

T

• test() – Define test

• test.describe() – Group tests

• test.beforeEach() / afterEach()

U

• page.uncheck(selector)

• page.url()

V

• page.video() – Capture video

• expect().toHaveValue()

W

• page.waitForSelector()

• page.waitForTimeout() (avoid when possible)

• page.waitForURL()

X

• expect(locator).toHaveText()

• expect(locator).toHaveCount()

Y

• page.waitForLoadState('networkidle')

Z

• npx playwright show-report – Open HTML report

---

Most-Used CLI Commands (Quick List)

npx playwright install
npx playwright test
npx playwright test --ui
npx playwright codegen
npx playwright debug
npx playwright show-report

---

Best Practices

• Prefer locator() over querySelector

• Avoid waitForTimeout() → use smart waits

• Use ARIA locators (getByRole) for stable tests

• Use Page Object Model (POM) for scalability

---

playwright-automation/
│
├── playwright.config.ts
├── package.json
├── package-lock.json
├── README.md
│
├── tests/
│   ├── login/
│   │   └── login.spec.ts
│   ├── dashboard/
│   │   └── dashboard.spec.ts
│   └── regression/
│       └── regression.spec.ts
│
├── pages/                    # Page Object Model (POM)
│   ├── LoginPage.ts
│   ├── DashboardPage.ts
│   └── BasePage.ts
│
├── fixtures/
│   └── testSetup.ts          # Custom fixtures
│
├── utils/
│   ├── testData.ts
│   ├── helpers.ts
│   ├── apiHelper.ts
│   └── logger.ts
│
├── test-data/
│   ├── users.json
│   └── config.json
│
├── reports/
│   └── html-report/
│
├── screenshots/
├── videos/
│
├── ci/
│   └── github-actions.yml
│
└── .env

---

1️⃣ playwright.config.ts

• Browser setup, retries, timeouts, reporters

• Environment configuration (QA / UAT / PROD)

• Parallel execution

use: {
  baseURL: process.env.BASE_URL,
  screenshot: 'only-on-failure',
  video: 'retain-on-failure'
}

---

2️⃣ tests/ – Test Layer

• Contains only test logic

• No locators, no UI logic

test('User can login', async ({ page }) => {
  await loginPage.login('user', 'password');
});

---

3️⃣ pages/ – Page Object Model

Encapsulates UI logic and locators.

export class LoginPage {
  constructor(private page: Page) {}

  async login(user, pass) {
    await this.page.fill('#user', user);
    await this.page.fill('#pass', pass);
    await this.page.click('#login');
  }
}

✔ Improves maintainability
✔ Reduces duplication

---

4️⃣ fixtures/ – Test Setup

Used for:

• Login state

• Browser context setup

• Auth reuse

test.extend({
  authenticatedPage: async ({ page }, use) => {
    await login(page);
    await use(page);
  }
});

---

5️⃣ utils/ – Helpers

Reusable utilities:

• API calls

• Random data

• Date handling

• Logging

export function generateEmail() {
  return `user_${Date.now()}@test.com`;
}

---

6️⃣ test-data/

• Externalize test data

• Supports data-driven testing

{
  "username": "testuser",
  "password": "Password123"
}

---

7️⃣ reports/

• HTML / Allure reports

• Stored for CI/CD review

---

8️⃣ screenshots/ & videos/

• Captured automatically on failures

• Used for defect analysis

---

9️⃣ ci/ – CI/CD Integration

GitHub Actions / Jenkins

- run: npx playwright test

✔ Enables nightly & PR runs

---

🔟 .env – Environment Config

BASE_URL=https://qa.example.com

---

Why This Framework Works in Real Projects

✔ Scalable
✔ Easy maintenance
✔ CI/CD ready
✔ Supports UI + API automation
✔ Industry-standard structure

---

Advanced Enhancements (Optional)

• Allure reporting

• API + UI hybrid tests

• Retry logic for flaky tests

• Multi-env execution

• Role-based auth storage

---

“We use Playwright with Page Object Model, custom fixtures, reusable utilities, and CI/CD integration for scalable automation.”

---

Below is a real-time End-to-End (E2E) Playwright test example using an industry-standard framework (POM + fixtures), exactly how it’s done in real projects.

---

E2E Scenario

User logs in → navigates to dashboard → creates a record → verifies success

---

 Test Case (E2E Flow)

📁 tests/e2e/user-flow.spec.ts

import { test, expect } from '@playwright/test';
import { LoginPage } from '../../pages/LoginPage';
import { DashboardPage } from '../../pages/DashboardPage';

test('E2E: User login and create record', async ({ page }) => {
  const loginPage = new LoginPage(page);
  const dashboard = new DashboardPage(page);

  // Step 1: Navigate & Login
  await loginPage.goto();
  await loginPage.login('testuser', 'Password123');

  // Step 2: Verify Dashboard
  await expect(dashboard.header).toBeVisible();

  // Step 3: Create new record
  await dashboard.createRecord('Playwright E2E Test');

  // Step 4: Validate success
  await expect(dashboard.successToast).toHaveText('Record created successfully');
});

---

 Login Page Object

📁 pages/LoginPage.ts

import { Page, Locator } from '@playwright/test';

export class LoginPage {
  readonly page: Page;
  readonly username: Locator;
  readonly password: Locator;
  readonly loginBtn: Locator;

  constructor(page: Page) {
    this.page = page;
    this.username = page.locator('#username');
    this.password = page.locator('#password');
    this.loginBtn = page.locator('#loginBtn');
  }

  async goto() {
    await this.page.goto('/login');
  }

  async login(user: string, pass: string) {
    await this.username.fill(user);
    await this.password.fill(pass);
    await this.loginBtn.click();
  }
}

---

 Dashboard Page Object

📁 pages/DashboardPage.ts

import { Page, Locator } from '@playwright/test';

export class DashboardPage {
  readonly page: Page;
  readonly header: Locator;
  readonly addButton: Locator;
  readonly nameInput: Locator;
  readonly saveButton: Locator;
  readonly successToast: Locator;

  constructor(page: Page) {
    this.page = page;
    this.header = page.locator('h1:has-text("Dashboard")');
    this.addButton = page.locator('#add');
    this.nameInput = page.locator('#name');
    this.saveButton = page.locator('#save');
    this.successToast = page.locator('.toast-success');
  }

  async createRecord(name: string) {
    await this.addButton.click();
    await this.nameInput.fill(name);
    await this.saveButton.click();
  }
}

---

 Playwright Config (E2E-Ready)

📁 playwright.config.ts

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  retries: 1,
  reporter: [['html'], ['list']],
  use: {
    baseURL: 'https://qa.example.com',
    screenshot: 'only-on-failure',
    video: 'retain-on-failure'
  }
});

---

 Execution Command

npx playwright test
npx playwright show-report

---

Why This Is a True Real-Time E2E Test

✔ Covers complete user journey
✔ Uses Page Object Model
✔ Assertions at critical checkpoints
✔ Failure evidence (screenshots/video)
✔ CI/CD friendly

---

implemented E2E tests in Playwright using POM, covering login-to-business-action workflows, with validations, reusable components, and CI integration.

---

Next Level Enhancements

• API setup before UI flow

• Auth storage state reuse

• Data-driven E2E

• Role-based access tests

• Parallel execution

---

Powershell commands handy

 File & Folder Commands

Alias Full Cmdlet Usage Example Description

ls Get-ChildItem ls -Force Lists files and folders (like Linux ls)

dir Get-ChildItem dir *.log Alias maintained for CMD users

gci Get-ChildItem gci -Recurse Shorthand for listing

cd Set-Location cd C:\Windows Change directory

chdir Set-Location chdir .. Same as cd

pwd Get-Location pwd Shows current directory

cp Copy-Item cp file.txt D:\Backup\ Copies files/folders

copy Copy-Item copy a.txt b.txt CMD-style alias

mv Move-Item mv old.txt new.txt Moves or renames items

move Move-Item move file1 folder\ Same as mv

rm Remove-Item rm temp.txt Deletes files/folders

del Remove-Item del *.tmp CMD-style delete

rmdir Remove-Item rmdir folder -Recurse Deletes folder & contents

ni New-Item ni file.txt -ItemType File Creates new file or folder

mkdir New-Item mkdir NewFolder Creates folder

md New-Item md Backup Short mkdir

cat Get-Content cat file.txt Displays file content (like Linux cat)

gc Get-Content gc config.json Shorthand for reading files

type Get-Content type notes.txt CMD-style alias

sc Set-Content sc file.txt "New text" Overwrites file content

ac Add-Content ac file.txt "More text" Appends to file

🟨 2. Execution & Opening

Alias Full Cmdlet Usage Example Description

ii Invoke-Item ii . Opens file or folder with default program

start Start-Process start notepad.exe Launches processes or files

sleep Start-Sleep sleep 5 Pauses for X seconds

saps Start-Process saps calc Shorthand for start process

gps Get-Process gps chrome Lists processes

ps Get-Process ps CMD-like process list

kill Stop-Process kill -Name notepad Kills a process by name or ID

🟩 3. Navigation & Info

Alias Full Cmdlet Usage Example Description

help Get-Help help ls Shows help for a cmdlet

man Get-Help man Get-Process Linux-style help

h Get-History h Shows command history

history Get-History history Same as h

cls Clear-Host cls Clears console screen

clear Clear-Host clear Linux-style clear

echo Write-Output echo Hello Prints text to console

write Write-Output write "done" Same as echo

🟪 4. Networking & System

Alias Full Cmdlet Usage Example Description

ipconfig (external) CMD utility ipconfig /all Shows network info

netstat (external) CMD utility netstat -ano Lists network connections

hostname (external) CMD utility hostname Displays computer name

ping (external) CMD utility ping 8.8.8.8 Tests network connectivity

tracert (external) CMD utility tracert google.com Traces route to host

👉 These aren’t PowerShell cmdlets but work inside PowerShell as external commands.

🟥 5. Miscellaneous Aliases

Alias Full Cmdlet Usage Example Description

% ForEach-Object `1..5 % { $_*2 }`

? Where-Object `gci ? { $_.Length -gt 1MB }`

sort Sort-Object `ls sort Length`

measure Measure-Object `ls measure`

select Select-Object `gps select Name,Id`

foreach ForEach-Object `ls foreach { $_.Name }`

📝 Quick Reference Summary

Common Alias Real Cmdlet Equivalent (Linux/CMD)

ls Get-ChildItem ls (Linux) / dir (CMD)

cd Set-Location cd

pwd Get-Location pwd

cp Copy-Item cp / copy

mv Move-Item mv / move

rm Remove-Item rm / del

cat Get-Content cat / type

ii Invoke-Item (like double-click)

% ForEach-Object for loops

? Where-Object grep-like filtering

Command prompt commands

 

System Information & Management

Command Usage

systeminfo Displays detailed system configuration (OS, BIOS, RAM, etc.)

hostname Shows the computer name

ver Displays the Windows version

set Shows all environment variables

setx VAR VALUE Sets a permanent environment variable

echo %VAR% Displays the value of an environment variable

tasklist Lists all running processes

taskkill /IM process.exe /F Force-kills a specific process

wmic os get caption Displays OS name

whoami Shows current user

date /t & time /t Shows current date and time

🟨 2. File & Folder Operations

Command Usage

dir Lists files and folders in the current directory

cd foldername Changes to a directory

cd .. Moves up one directory level

md foldername / mkdir foldername Creates a new folder

rmdir foldername Removes an empty folder

rmdir /S /Q foldername Deletes a folder and its contents silently

del filename Deletes a file

copy file1 file2 Copies files

xcopy source dest /E /I Copies entire directories (deprecated but common)

robocopy source dest /E Robust copy for folders, preserves attributes

move file1 folder Moves or renames files

ren oldname newname Renames files or folders

attrib +r file.txt Sets file as read-only (-r to remove)

🟧 3. Networking Commands

Command Usage

ipconfig Shows IP configuration

ipconfig /all Shows full network adapter details

ipconfig /release Releases IP address

ipconfig /renew Renews IP address

ping hostname Checks network connectivity

tracert hostname Traces route packets take to destination

nslookup domain Looks up DNS information

netstat -ano Lists network connections & ports with PIDs

netsh wlan show profiles Lists saved Wi-Fi profiles

netsh wlan show profile name="SSID" key=clear Shows Wi-Fi password for a network

ftp Opens FTP session (old but still used)

telnet host port Tests connectivity to a specific port (if Telnet Client installed)

🟩 4. Disk & File System Commands

Command Usage

chkdsk C: Checks disk for errors

chkdsk C: /F /R Fixes errors and recovers bad sectors

diskpart Opens disk partitioning tool (advanced)

label Changes volume label

vol Shows volume label and serial number

fsutil fsinfo drives Lists all drives

format X: Formats a drive (⚠ destructive)

sfc /scannow Scans and repairs system files

defrag C: Defragments a disk

🟪 5. User & Security Commands

Command Usage

net user Lists all user accounts

net user username Shows details about a user

net user newuser password /add Creates a new user

net localgroup administrators username /add Adds user to Administrators group

net accounts Shows password policies

runas /user:domain\user cmd Runs a command as another user

cipher /w:C:\ Securely wipes free space on drive

shutdown /r /t 0 Reboots computer immediately

shutdown /s /t 60 Shuts down after 60 seconds

shutdown /a Aborts a scheduled shutdown

🟥 6. System Configuration & Troubleshooting

Command Usage

msconfig Opens System Configuration GUI

regedit Opens Windows Registry Editor

eventvwr Opens Event Viewer

services.msc Opens Services console

devmgmt.msc Opens Device Manager

driverquery Lists installed drivers

driverquery /si Lists signed driver info

bcdedit Edits boot configuration data

sfc /verifyonly Verifies system files without fixing

DISM /Online /Cleanup-Image /RestoreHealth Repairs Windows image

⚙ 7. Batch Scripting Essentials

Command Usage

echo text Displays text

@echo off Turns off command echo in batch scripts

pause Waits for user input

cls Clears the screen

call Calls another batch file

if / else Conditional execution

for /L %%i in (1,1,5) do ... Looping in batch

goto label Jumps to label

exit Exits the command prompt or script

📝 Bonus: Useful One-Liners

Command Description

tree /f Displays folder structure including files

fc file1 file2 Compares two text files

clip < file.txt Copies file content to clipboard

type nul > filename.txt Creates an empty file

assoc / ftype View/change file associations

title MyPrompt Changes the CMD window title

color 0A Changes CMD text and background color (here: black bg, green text)