Playwright Migration and GitHub Actions for CI (#7)

.github/workflows/playwright.yml

@@ -0,0 +1,25 @@
+name: Tram-Deco Playwright Tests
+
+on: push
+
+jobs:
+  test:
+    timeout-minutes: 15
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - name: Install dependencies
+        run: npm ci
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: npm run test:ci
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -1,8 +1,11 @@
 # Dependency Directory
 node_modules
 
-# cypress artifacts
-cypress
-
 # minified output
 *.min.js
+
+# playwrite
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

example/example.spec.js

@@ -0,0 +1,76 @@
+// @ts-check
+const { test, expect } = require('@playwright/test');
+const path = require('path');
+
+const getTextContent = async (element) => {
+	return await element.evaluate((el) => el.textContent);
+};
+
+test.describe('Tram-Deco Example Components', () => {
+	test('should validate all Tram-Deco APIs and Use Cases', async ({ page }) => {
+		// Construct the absolute file path and use the file:// protocol
+		const filePath = path.resolve(__dirname, '../example/index.html');
+		await page.goto(`file://${filePath}`);
+
+		// validate that the document title is set
+		await expect(page).toHaveTitle('Tram-Deco is Cool!');
+
+		// validate that the title shadowDOM is rendered as expected
+		const customTitle = page.locator('custom-title');
+		await expect(customTitle.locator('h1')).toBeVisible();
+		const renderedText = await getTextContent(customTitle);
+		expect(renderedText).toBe('Tram-Deco is Cool!');
+
+		// validate that the callout-alert can be collapsed and expanded
+		const calloutAlert = page.locator('callout-alert');
+		await expect(calloutAlert).toHaveAttribute('collapsed', '');
+		await expect(calloutAlert.locator('button')).toHaveText('expand');
+		await expect(calloutAlert.locator('#content')).not.toBeVisible();
+		await calloutAlert.locator('button').click();
+		await expect(calloutAlert.locator('button')).toHaveText('collapse');
+		await expect(calloutAlert.locator('#content')).toBeVisible();
+		await expect(calloutAlert).not.toHaveAttribute('collapsed', '');
+
+		// validate that the individual counters can be incremented
+		const counterA = page.locator('my-counter#a');
+		await expect(counterA).toHaveAttribute('count', '0');
+		await expect(counterA.locator('button')).toHaveText('Counter: 0');
+		await counterA.click();
+		await expect(counterA).toHaveAttribute('count', '1');
+		await expect(counterA.locator('button')).toHaveText('Counter: 1');
+
+		const counterB = page.locator('my-counter#b');
+		await expect(counterB).toHaveAttribute('count', '12');
+		await expect(counterB.locator('button')).toHaveText('Counter: 12');
+
+		// validate that exported components are rendered as expected
+		const spoilerTag = page.locator('spoiler-tag');
+		await expect(spoilerTag.locator('[aria-hidden="true"]')).toBeVisible();
+		await spoilerTag.click();
+		await expect(spoilerTag.locator('[aria-hidden="false"]')).toBeVisible();
+
+		// validate that button that implements a shadow DOM from a parent with none works as expected
+		const removableButton = page.locator('red-removable-button#r');
+		await expect(removableButton).toBeVisible();
+		await removableButton.click();
+		await expect(removableButton).not.toBeVisible();
+
+		// validate that extended counters with different shadow DOM work as expected
+		const redCounter = page.locator('my-red-counter#d');
+		await expect(redCounter).toHaveAttribute('count', '10');
+		await redCounter.click();
+		await expect(redCounter).toHaveAttribute('count', '11');
+
+		// validate that extended counters with nothing different work as expected
+		const copiedCounter = page.locator('my-copied-counter#c');
+		await expect(copiedCounter).toHaveAttribute('count', '15');
+		await copiedCounter.click();
+		await expect(copiedCounter).toHaveAttribute('count', '16');
+
+		// validate that extended counters with different callbacks work as expected
+		const decrementingCounter = page.locator('my-decrementing-counter#e');
+		await expect(decrementingCounter).toHaveAttribute('count', '5');
+		await decrementingCounter.click();
+		await expect(decrementingCounter).toHaveAttribute('count', '4');
+	});
+});

package.json

@@ -17,7 +17,8 @@
 		"build": "uglifyjs tram-deco.js -o tram-deco.min.js -c -m",
 		"test-export": "node scripts/export-components.js example/spoiler-tag.html -o example/spoiler-tag.js",
 		"pretest": "npm run build && npm run test-export",
-		"test": "cypress open"
+		"test": "playwright test --ui",
+		"test:ci": "playwright test"
 	},
 	"keywords": [],
 	"author": {
@@ -27,6 +28,8 @@
 	},
 	"license": "MIT",
 	"devDependencies": {
+		"@playwright/test": "^1.46.1",
+		"@types/node": "^22.5.0",
 		"cypress": "^13.10.0",
 		"playwright-webkit": "^1.46.1",
 		"prettier": "^3.2.4",

playwright.config.js

@@ -0,0 +1,78 @@
+// @ts-check
+const { defineConfig, devices } = require('@playwright/test');
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ */
+module.exports = defineConfig({
+	testDir: './',
+	/* 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 start',
+	//   url: 'http://127.0.0.1:3000',
+	//   reuseExistingServer: !process.env.CI,
+	// },
+});