Playwright setup

Author: yoriiis

.github/workflows/e2e-tests.yml

@@ -0,0 +1,54 @@
+name: E2E Tests
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  e2e:
+    runs-on: ubuntu-latest
+
+    timeout-minutes: 15
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Build project
+        run: npm run build
+
+      - name: Start dev server
+        run: |
+          npm run start:example &
+          npx wait-on http://localhost:3000
+        timeout-minutes: 2
+
+      - name: Run Playwright tests
+        run: npx playwright test
+
+      - name: Upload test results
+        if: always()
+        uses: actions/upload-artifact@v3
+        with:
+          name: playwright-test-results
+          path: test-results
+
+      # - name: Upload HTML report
+      #   if: always()
+      #   uses: actions/upload-artifact@v3
+      #   with:
+      #     name: playwright-html-report
+      #     path: playwright-report

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 dist
 lib
+test-results

config/playwright.config.ts

@@ -0,0 +1,52 @@
+import { defineConfig, devices } from '@playwright/test'
+
+export default defineConfig({
+	testDir: '../tests',
+	outputDir: '../test-results',
+	webServer: {
+		command: 'npm run build && npm run start:example',
+		port: 3000,
+		timeout: 60 * 1000,
+		reuseExistingServer: !process.env.CI
+	},
+	use: {
+		baseURL: 'http://localhost:3000'
+	},
+	projects: [
+		{
+			name: 'Chrome Desktop',
+			use: {
+				channel: 'chrome',
+				viewport: { width: 1280, height: 800 }
+			}
+		},
+		{
+			name: 'Chrome Mobile (Pixel 7)',
+			use: {
+				...devices['Pixel 7'],
+				channel: 'chrome'
+			}
+		},
+		{
+			name: 'Firefox Desktop',
+			use: {
+				browserName: 'firefox',
+				viewport: { width: 1280, height: 800 }
+			}
+		},
+		{
+			name: 'Safari Desktop (WebKit)',
+			use: {
+				browserName: 'webkit',
+				viewport: { width: 1280, height: 800 }
+			}
+		},
+		{
+			name: 'Safari Mobile (iPhone 14)',
+			use: {
+				...devices['iPhone 14'],
+				browserName: 'webkit'
+			}
+		}
+	]
+})

package-lock.json

@@ -70,6 +70,8 @@
 		"build:example": "rm -rf ./examples/dist/ && webpack --mode=production --config=./examples/webpack.config.js",
 		"clean": "rm -rf ./dist/ ./examples/dist/",
 		"dev:types": "tsc --noEmit --watch",
+		"e2e": "playwright test --config ./config/playwright.config.ts",
+		"e2e:ui": "playwright test --ui --config ./config/playwright.config.ts",
 		"pre:publish": "npm run build && npm run build:example && npm run test",
 		"start": "rm -rf ./dist/ && rollup --config ./config/rollup.config.js --environment ENV:development --watch --sourcemap",
 		"start:example": "rm -rf ./examples/dist/ && webpack serve --mode=development --config=./examples/webpack.config.js",
@@ -80,6 +82,7 @@
 	},
 	"devDependencies": {
 		"@biomejs/biome": "^1.9.4",
+		"@playwright/test": "^1.51.1",
 		"@rollup/plugin-alias": "^5.1.1",
 		"@rollup/plugin-buble": "^1.0.3",
 		"@rollup/plugin-node-resolve": "^15.3.0",

package.json

@@ -222,9 +222,9 @@ export default class ControlBar {
 	 */
 	isOrientationApiAvailable() {
 		return (
-			window.screen.orientation &&
-			// @ts-ignore
-			!window.screen.mozOrientation
+			typeof window.screen.orientation !== 'undefined' &&
+			typeof window.screen.orientation.lock === 'function' &&
+			typeof window.screen.orientation.unlock === 'function'
 		)
 	}
 

src/components/control-bar/control-bar.ts

@@ -0,0 +1,33 @@
+import { test, expect } from '@playwright/test'
+
+const providers = ['html5', 'youtube', 'vimeo', 'dailymotion']
+
+providers.forEach((provider) => {
+	test.describe(`${provider} Player`, () => {
+		test.beforeEach(async ({ page }) => {
+			await page.goto(`http://localhost:3000/${provider}`)
+		})
+
+		test('should initialize the player', async ({ page }) => {
+			const player = await page.$('.v-vlite')
+			expect(player).not.toBeNull()
+
+			const playButton = await page.$('.v-bigPlay')
+			expect(playButton).not.toBeNull()
+		})
+	})
+})
+
+test.describe('Audio Player', () => {
+	test.beforeEach(async ({ page }) => {
+		await page.goto('http://localhost:3000/audio')
+	})
+
+	test('should initialize the player', async ({ page }) => {
+		const player = await page.$('.v-vlite')
+		expect(player).not.toBeNull()
+
+		const playButton = await page.$('.v-playPauseButton')
+		expect(playButton).not.toBeNull()
+	})
+})

tests/common.spec.ts

@@ -0,0 +1,78 @@
+import { test, expect } from '@playwright/test'
+
+test.describe('HTML5 Player Tests', () => {
+	test.beforeEach(async ({ page }) => {
+		await page.goto('http://localhost:3000/html5')
+	})
+
+	test('Test player is initialized', async ({ page }) => {
+		const player = await page.$('.v-vlite')
+		expect(player).not.toBeNull()
+
+		const playButton = await page.$('.v-bigPlay')
+		expect(playButton).not.toBeNull()
+	})
+
+	test('Test big play button starts playback', async ({ page }) => {
+		await page.click('.v-bigPlay')
+
+		const isPlaying = await page.evaluate(() => {
+			const video = document.querySelector('#player')
+			return !video.paused
+		})
+		expect(isPlaying).toBe(true)
+	})
+
+	test('Test pause video on overlay click', async ({ page }) => {
+		await page.click('.v-bigPlay')
+		await page.click('.v-overlay')
+
+		const isPaused = await page.evaluate(() => {
+			const video = document.querySelector('video')
+			return video.paused
+		})
+		expect(isPaused).toBe(true)
+	})
+
+	test('Test mute on volume button click', async ({ page }) => {
+		await page.click('.v-bigPlay')
+		await page.click('.v-volumeButton')
+
+		const muted = await page.evaluate(() => {
+			const video = document.querySelector('video')
+			return video.muted
+		})
+		expect(muted).toBe(true)
+	})
+
+	test('Test enter fullscreen button works', async ({ page, browserName }, testInfo) => {
+		const isSafariMobile = browserName === 'webkit' && testInfo.project.name.includes('iPhone')
+		if (isSafariMobile) {
+			test.skip(true, 'Fullscreen is not reliably supported on iOS Safari in automated tests')
+		}
+
+		await page.click('.v-bigPlay')
+		await page.click('.v-fullscreenButton')
+
+		const isFullscreen = await page.evaluate(() => {
+			return document.fullscreenElement !== null
+		})
+		expect(isFullscreen).toBe(true)
+	})
+
+	test('Test exit fullscreen button works', async ({ page, browserName }, testInfo) => {
+		const isSafariMobile = browserName === 'webkit' && testInfo.project.name.includes('iPhone')
+		if (isSafariMobile) {
+			test.skip(true, 'Fullscreen is not reliably supported on iOS Safari in automated tests')
+		}
+
+		await page.click('.v-bigPlay')
+		await page.click('.v-fullscreenButton')
+		await page.click('.v-fullscreenButton')
+
+		const isFullscreen = await page.evaluate(() => {
+			return document.fullscreenElement !== null
+		})
+		expect(isFullscreen).toBe(false)
+	})
+})