Skip to content
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .env.example
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
BASE_URL=https://example.com
63 changes: 63 additions & 0 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
name: Playwright CI

on:
push:
branches:
- main
- master
pull_request:
Comment on lines +4 to +8
workflow_dispatch:
Comment on lines +8 to +9
repository_dispatch:
types: [workspace_dispatch]

jobs:
test:
runs-on: ubuntu-latest

steps:
- name: Checkout
uses: actions/checkout@v4

- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: 20
cache: npm

- name: Install dependencies
run: npm ci

- name: Install Playwright browser
run: npx playwright install --with-deps chromium

- name: Run Playwright tests
run: npm test

- name: Setup Testspace client
uses: testspace-com/setup-testspace@v1
with:
domain: samples.stridespace.com
# Optional for public repositories; required for private repositories.
token: ${{ secrets.TESTSPACE_TOKEN }}

Comment on lines +36 to +40
- name: Publish results to Testspace
env:
# Optional for public repositories; required for private repositories.
TESTSPACE_TOKEN: ${{ secrets.TESTSPACE_TOKEN }}
run: testspace test-results/junit/results.xml
Comment on lines +41 to +42
Comment on lines +41 to +42

- name: Upload JUnit report
if: always()
uses: actions/upload-artifact@v4
with:
name: junit-report
path: test-results/junit/results.xml
if-no-files-found: ignore

- name: Upload HTML report
if: always()
uses: actions/upload-artifact@v4
with:
name: playwright-html-report
path: playwright-report/
if-no-files-found: ignore
9 changes: 9 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
node_modules/
playwright-report/
test-results/
.playwright/
.env
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
154 changes: 154 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
# JavaScript Playwright Scenarios

Minimal Playwright setup for JavaScript-based browser scenarios with:

- HTML reporting
- JUnit XML reporting
- Optional `.env` support via `dotenv`
- A hello-world smoke test
- Common npm scripts for local execution

## Prerequisites

- Node.js 20+
- npm 10+

## Initial setup

If starting from an empty folder, create a project manifest:

```bash
npm init -y
```

Install project dependencies:

```bash
npm install --save-dev @playwright/test dotenv
```

Optional: create a local environment file from the example:

```bash
cp .env.example .env
```

Install the browser used by this starter project:

```bash
npx playwright install chromium
```

Run the hello-world verification test:

```bash
npm run test:hello
```

## Running tests

Run all tests:

```bash
npm test
```

Run a single file directly:

```bash
npx playwright test tests/hello-world.spec.js
```

Run headed mode:

```bash
npm run test:headed
```

Run with Playwright UI mode:

```bash
npm run test:ui
```

Run in debug mode:

```bash
npm run test:debug
```

## Reports

Every test run writes:

- HTML report to `playwright-report/`
- JUnit XML to `test-results/junit/results.xml`

Open the HTML report after a run:

```bash
npm run report:html
```

## CI (GitHub Actions)

A minimal workflow is included at `.github/workflows/ci.yml`.

It runs on:

- push to `main` or `master`
- pull requests
- manual trigger via `workflow_dispatch`
- repository dispatch event type `workspace_dispatch`

The workflow uploads both:

- JUnit XML report
- Playwright HTML report

### Testspace publishing

The workflow can also publish JUnit results to Testspace.

The workflow is configured to publish to the Testspace staging server:

- `samples.stridespace.com`

Configure this repository secret in GitHub:

- Secret: TESTSPACE_TOKEN
Optional for public repositories
Required for private repositories

CI publishes:

- test-results/junit/results.xml

## Changing the target URL

The sample test uses `BASE_URL` and defaults to `https://example.com`.

You can store it in a `.env` file:

```bash
BASE_URL=https://example.com
```

Example:

```bash
BASE_URL=https://playwright.dev npm run test:hello
```

If you change `BASE_URL`, update the sample assertions to match that page.

## Project structure

```text
.
|-- package.json
|-- playwright.config.js
|-- README.md
`-- tests/
`-- hello-world.spec.js
```
92 changes: 92 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

19 changes: 19 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
{
"name": "javascript.playwright-scenarios",
"version": "1.0.0",
"private": true,
"description": "Starter setup for running JavaScript Playwright scenarios with HTML and JUnit reporting.",
"scripts": {
"test": "playwright test",
"test:headed": "playwright test --headed",
"test:ui": "playwright test --ui",
"test:debug": "playwright test --debug",
"test:hello": "playwright test tests/hello-world.spec.js",
"report:html": "playwright show-report playwright-report",
"install:browsers": "playwright install chromium"
},
"devDependencies": {
"@playwright/test": "^1.60.0",
"dotenv": "^16.6.1"
}
}
41 changes: 41 additions & 0 deletions playwright.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
require('dotenv').config();

const { defineConfig, devices } = require('@playwright/test');
const isWSL = !!process.env.WSL_DISTRO_NAME;

module.exports = defineConfig({
testDir: './tests',
timeout: 30_000,
fullyParallel: true,
forbidOnly: !!process.env.CI,
retries: process.env.CI ? 2 : 0,
workers: process.env.CI ? 1 : undefined,
reporter: [
['list'],
['html', { outputFolder: 'playwright-report', open: 'never' }],
['junit', { outputFile: 'test-results/junit/results.xml' }]
],
use: {
baseURL: process.env.BASE_URL || 'https://example.com',
trace: 'on-first-retry',
screenshot: 'only-on-failure',
video: 'retain-on-failure'
},
projects: [
{
name: 'chromium',
use: {
...devices['Desktop Chrome'],
launchOptions: {
args: [
'--window-position=80,80',
'--window-size=1440,900',
'--start-maximized',
...(isWSL ? ['--ozone-platform=x11', '--disable-gpu'] : [])
]
}
}
}
],
outputDir: 'test-results/artifacts'
});
7 changes: 7 additions & 0 deletions tests/hello-world.spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
const { test, expect } = require('@playwright/test');

test('hello world smoke test', async ({ page }) => {
await page.goto('/');
await expect(page).toHaveTitle(/Example Domain/);
await expect(page.getByRole('heading', { name: 'Example Domain' })).toBeVisible();
});
Loading