fix: playwright config and setup

playwright.config.ts

@@ -3,29 +3,13 @@ import { devices } from '@playwright/test';
 const config = {
 	testDir: 'tests',
 	forbidOnly: !!process.env.CI,
-	webServer: {
-		command: 'npm run build && npm run preview',
-		port: 4173
-	},
 	projects: [
 		{
 			name: 'chromium',
 			use: {
 				...devices['Desktop Chrome']
 			}
 		},
-		{
-			name: 'chromium',
-			use: {
-				...devices['Desktop Chrome']
-			}
-		},
-		{
-			name: 'firefox',
-			use: {
-				...devices['Desktop Firefox']
-			}
-		}
 	]
 };
 

src/lib/components/Sidebar.svelte

@@ -8,6 +8,7 @@
 	import { browser } from '$app/environment';
   import { getLocaleForSSR } from '$lib/utils/get-locale';
   import { selectedLocale } from '$lib/store/selected-locale';
+	import { testIds } from '$lib/utils/dom-utils';
 
 	const matchMedia = browser ? window.matchMedia('(min-width: 900px)') : null;
 	const locale = browser ? $selectedLocale : getLocaleForSSR($page);
@@ -62,7 +63,7 @@
 	<summary>
 		<p class="menu-button">Menu</p>
 	</summary>
-	<nav aria-label="Main Menu" data-testid="navigation">
+	<nav aria-label="Main Menu" data-testid={testIds.navigation}>
 		<ul>
 			<li><strong><a href="/?locale={locale}">About</a></strong></li>
 			<li aria-hidden="true" class="menu-heading"><strong>Playground</strong></li>

src/lib/utils/dom-utils.ts

@@ -0,0 +1,3 @@
+export const testIds = {
+  navigation: "navigation"
+}

tests/IntlPage.ts

@@ -0,0 +1,88 @@
+import { expect, type Page } from '@playwright/test';
+import { defaultPageUnderTest, localBaseURL, mdnUrl } from './contstants';
+import { checkA11y } from 'axe-playwright';
+import { testIds } from '../src/lib/utils/dom-utils';
+
+export type IntlPageConfig = {
+	page: Page;
+	tabKey?: string;
+	baseURL?: string;
+};
+
+// This is here because for some weird reason playwright cant import from other files :shrug:
+export class IntlPage {
+	private readonly tabKey: string;
+	private readonly baseURL: string;
+	private pageUnderTest: string;
+	public page: Page;
+
+	constructor({ page, tabKey = 'Tab', baseURL }: IntlPageConfig) {
+		this.page = page;
+		this.tabKey = tabKey;
+		this.baseURL = baseURL ?? localBaseURL;
+		this.pageUnderTest = defaultPageUnderTest;
+	}
+
+	public setPageUnderTest(pageUnderTest: string) {
+		this.pageUnderTest = pageUnderTest;
+	}
+
+	private getMDNLinkLocator(method: string): string {
+		return `a[href="${mdnUrl}/${method}"]`;
+	}
+
+	private getMDNLinkText(method: string): string {
+		return `MDN Link for Intl.${method}`;
+	}
+
+	private getUrl(method: string, locale?: string): string {
+		return `${this.baseURL}/${method}?locale=${locale ?? 'en-US'}`;
+	}
+
+	public async goToHome(){
+		await this.page.goto(this.baseURL);
+	}
+
+	public async clickOnNavigationLink() {
+		await this.page
+			.locator(`[data-testid="${testIds.navigation}"] a:has-text("${this.pageUnderTest}")`)
+			.click();
+	}
+
+	public async goToPage() {
+		await this.clickOnNavigationLink();
+		await expect(this.page).toHaveURL(new RegExp(this.getUrl(this.pageUnderTest)));
+	}
+
+	public async assertTitle() {
+		expect(await this.page.textContent('h1')).toBe(`Intl.${this.pageUnderTest}`);
+	}
+
+	public async assertMDNLink() {
+		expect(await this.page.textContent('h1')).toBe(`Intl.${this.pageUnderTest}`);
+		expect(await this.page.textContent(this.getMDNLinkLocator(this.pageUnderTest))).toBe(
+			this.getMDNLinkText(this.pageUnderTest)
+		);
+	}
+
+	public async selectLocale(locale: string) {
+		await this.page.locator('select[name="locale"]').nth(0).selectOption(locale);
+	}
+
+	public async assertUrlLocale(locale: string) {
+		await expect(this.page).toHaveURL(this.getUrl(this.pageUnderTest, locale));
+	}
+
+	async tabAndAssertElementHasFocus(selector: string, nth = 0) {
+		await this.page.keyboard.press(this.tabKey);
+		await expect(this.page.locator(selector).nth(nth)).toBeFocused();
+	}
+
+	async checkAlly() {
+		await checkA11y(this.page, undefined, {
+			axeOptions: {},
+			detailedReport: true,
+			detailedReportOptions: { html: true }
+		});
+	}
+}

tests/contstants.ts

@@ -0,0 +1,3 @@
+export const mdnUrl = 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl';
+export const localBaseURL = 'http://localhost:5173'
+export const defaultPageUnderTest = '/';