Skip to content

Commit

Permalink
feat: playwright e2e testing
Browse files Browse the repository at this point in the history
  • Loading branch information
elsbrock committed Oct 28, 2024
1 parent 7a5bfcc commit 5f59414
Show file tree
Hide file tree
Showing 7 changed files with 268 additions and 63 deletions.
30 changes: 30 additions & 0 deletions .github/workflows/playwright.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
name: Playwright Tests
on:
push:
branches: [ main, master ]
pull_request:
branches: [ main, master ]
jobs:
test:
timeout-minutes: 60
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: lts/*
- name: Fetch a recent database dump
run: |
curl -o static/sb.duckdb.wasm https://radar.iodev.org/sb.duckdb.wasm
- name: Install dependencies
run: npm ci
- name: Install Playwright Browsers
run: npx playwright install --with-deps
- name: Run Playwright tests
run: npx playwright test
- uses: actions/upload-artifact@v4
if: ${{ !cancelled() }}
with:
name: playwright-report
path: playwright-report/
retention-days: 30
4 changes: 4 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,7 @@ node_modules
data
build
*.wasm
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/
79 changes: 74 additions & 5 deletions package-lock.json

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

118 changes: 60 additions & 58 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,60 +1,62 @@
{
"name": "web",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"test": "vitest",
"lint": "prettier --check . && eslint .",
"format": "prettier --write ."
},
"devDependencies": {
"@duckdb/duckdb-wasm": "^1.28.1-dev106.0",
"@sveltejs/adapter-auto": "^3.0.0",
"@sveltejs/adapter-static": "^3.0.4",
"@sveltejs/kit": "^2.0.0",
"@sveltejs/vite-plugin-svelte": "^3.0.0",
"@types/d3": "^7.4.3",
"@types/eslint": "^9.0.0",
"@types/svelte-range-slider-pips": "^2.0.4",
"autoprefixer": "^10.4.19",
"eslint": "^9.0.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-svelte": "^2.36.0",
"flowbite": "^2.4.1",
"flowbite-svelte": "^0.47.0",
"flowbite-svelte-icons": "^1.6.1",
"globals": "^15.0.0",
"postcss": "^8.4.38",
"prettier": "^3.1.1",
"prettier-plugin-svelte": "^3.1.2",
"prettier-plugin-tailwindcss": "^0.6.4",
"svelte": "^4.2.7",
"svelte-check": "^4.0.0",
"svelte-echarts": "^1.0.0-rc3",
"svelte-range-slider-pips": "^3.0.0",
"tailwindcss": "^3.4.4",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"typescript-eslint": "^8.0.0-alpha.20",
"vite": "^5.0.3",
"vite-plugin-remove-console": "^2.2.0",
"vitest": "^2.0.0"
},
"type": "module",
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.6.0",
"@fortawesome/free-brands-svg-icons": "^6.6.0",
"@fortawesome/free-solid-svg-icons": "^6.6.0",
"@fortawesome/svelte-fontawesome": "^0.2.2",
"dayjs": "^1.11.12",
"deepmerge": "^4.3.1",
"filesize": "^10.1.4",
"lz-string": "^1.5.0",
"sql-template-strings": "^2.2.2"
}
"name": "web",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"test": "vitest",
"lint": "prettier --check . && eslint .",
"format": "prettier --write ."
},
"devDependencies": {
"@duckdb/duckdb-wasm": "^1.28.1-dev106.0",
"@playwright/test": "^1.48.2",
"@sveltejs/adapter-auto": "^3.0.0",
"@sveltejs/adapter-static": "^3.0.4",
"@sveltejs/kit": "^2.0.0",
"@sveltejs/vite-plugin-svelte": "^3.0.0",
"@types/d3": "^7.4.3",
"@types/eslint": "^9.0.0",
"@types/node": "^22.8.1",
"@types/svelte-range-slider-pips": "^2.0.4",
"autoprefixer": "^10.4.19",
"eslint": "^9.0.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-svelte": "^2.36.0",
"flowbite": "^2.4.1",
"flowbite-svelte": "^0.47.0",
"flowbite-svelte-icons": "^1.6.1",
"globals": "^15.0.0",
"postcss": "^8.4.38",
"prettier": "^3.1.1",
"prettier-plugin-svelte": "^3.1.2",
"prettier-plugin-tailwindcss": "^0.6.4",
"svelte": "^4.2.7",
"svelte-check": "^4.0.0",
"svelte-echarts": "^1.0.0-rc3",
"svelte-range-slider-pips": "^3.0.0",
"tailwindcss": "^3.4.4",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"typescript-eslint": "^8.0.0-alpha.20",
"vite": "^5.0.3",
"vite-plugin-remove-console": "^2.2.0",
"vitest": "^2.0.0"
},
"type": "module",
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.6.0",
"@fortawesome/free-brands-svg-icons": "^6.6.0",
"@fortawesome/free-solid-svg-icons": "^6.6.0",
"@fortawesome/svelte-fontawesome": "^0.2.2",
"dayjs": "^1.11.12",
"deepmerge": "^4.3.1",
"filesize": "^10.1.4",
"lz-string": "^1.5.0",
"sql-template-strings": "^2.2.2"
}
}
80 changes: 80 additions & 0 deletions playwright.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import { defineConfig, devices } from '@playwright/test';

/**
* Read environment variables from file.
* https://github.com/motdotla/dotenv
*/
// import dotenv from 'dotenv';
// import path from 'path';
// dotenv.config({ path: path.resolve(__dirname, '.env') });

/**
* See https://playwright.dev/docs/test-configuration.
*/
export default defineConfig({
testDir: './tests',
testMatch: /(.+\.)?(test|spec)\.[jt]s/,
/* Run tests in files in parallel */
fullyParallel: true,
/* Fail the build on CI if you accidentally left test.only in the source code. */
forbidOnly: !!process.env.CI,
/* Retry on CI only */
retries: process.env.CI ? 2 : 0,
/* Opt out of parallel tests on CI. */
workers: process.env.CI ? 1 : undefined,
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
reporter: 'html',
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
use: {
/* Base URL to use in actions like `await page.goto('/')`. */
// baseURL: 'http://127.0.0.1:3000',

/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: 'on-first-retry',
},

/* Configure projects for major browsers */
projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
},

{
name: 'firefox',
use: { ...devices['Desktop Firefox'] },
},

{
name: 'webkit',
use: { ...devices['Desktop Safari'] },
},

/* Test against mobile viewports. */
// {
// name: 'Mobile Chrome',
// use: { ...devices['Pixel 5'] },
// },
// {
// name: 'Mobile Safari',
// use: { ...devices['iPhone 12'] },
// },

/* Test against branded browsers. */
// {
// name: 'Microsoft Edge',
// use: { ...devices['Desktop Edge'], channel: 'msedge' },
// },
// {
// name: 'Google Chrome',
// use: { ...devices['Desktop Chrome'], channel: 'chrome' },
// },
],

/* Run your local dev server before starting the tests */
webServer: {
command: 'npm run build && npm run preview',
port: 4173,
reuseExistingServer: !process.env.CI,
},
});
13 changes: 13 additions & 0 deletions tests/analyze.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { test, expect } from '@playwright/test';

test('analyze: we have data', async ({ page }) => {
await page.goto('/analyze');
await page.getByRole('cell', { name: /We have observed \d+ unique/ }).waitFor();
await expect(page.getByText('Volume', { exact: true })).toBeVisible();
await expect(page.getByText('Price (€)', { exact: true })).toBeDefined();
await expect(page.getByLabel('Clear Filter')).not.toBeVisible();
await page.getByLabel('Save Filter').click();
await expect(page.getByLabel('Clear Filter')).toBeDefined();
await page.getByLabel('Clear Filter').click();
await expect(page.getByLabel('Clear Filter')).not.toBeVisible();
});
7 changes: 7 additions & 0 deletions tests/landing.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { expect, test } from '@playwright/test';

test('landing page', async ({ page }) => {
await page.goto('/');
await expect(page.getByRole('heading', { name: 'Find the Best Deals on' })).toBeVisible();
await expect(page.getByText('Server Radar monitors Hetzner')).toBeVisible();
});

0 comments on commit 5f59414

Please sign in to comment.