Get tests working locally

package.json

@@ -2,7 +2,7 @@
 	"name": "dddsw-web",
 	"version": "0.0.1",
 	"scripts": {
-		"dev": "vite dev",
+		"dev": "vite dev --host 127.0.0.1",
 		"build": "vite build",
 		"package": "svelte-kit package",
 		"preview": "vite preview",
@@ -17,6 +17,7 @@
 		"@sveltejs/adapter-auto": "^2.1.0",
 		"@sveltejs/kit": "^1.25.0",
 		"@types/cookie": "^0.5.2",
+		"@types/node": "^20.6.2",
 		"@typescript-eslint/eslint-plugin": "^6.7.0",
 		"@typescript-eslint/parser": "^6.7.0",
 		"eslint": "^8.49.0",

playwright.config.ts

@@ -3,8 +3,12 @@ import type { PlaywrightTestConfig } from '@playwright/test';
 const config: PlaywrightTestConfig = {
 	webServer: {
 		command: 'npm run dev',
-		port: 5173
-	}
+		url: 'http://127.0.0.1:5173',
+		reuseExistingServer: !process.env.CI
+	},
+	use: {
+		baseURL: 'http://127.0.0.1:5173/',
+	},
 };
 
 export default config;

tests/navbar.spec.ts

@@ -2,7 +2,7 @@ import { test, expect, devices } from '@playwright/test';
 
 test('Clicking nav button displays nav links dropdown', async ({ page }) => {
 	// Go to about page (to avoid carousel weirdness)
-	await page.goto('http://127.0.0.1:5173/about');
+	await page.goto('/about');
 
 	// Click nav drop down
 	await page.locator('.main-nav-button').click();
@@ -12,7 +12,7 @@ test('Clicking nav button displays nav links dropdown', async ({ page }) => {
 
 test('Clicking nav button closes nav links dropdown', async ({ page }) => {
 	// Go to about page (to avoid carousel weirdness)
-	await page.goto('http://127.0.0.1:5173/about');
+	await page.goto('/about');
 
 	// Click nav drop down
 	await page.locator('.main-nav-button').click();
@@ -25,7 +25,7 @@ test('Clicking nav button closes nav links dropdown', async ({ page }) => {
 
 test('Clicking nav link closes nav links dropdown', async ({ page }) => {
 	// Go to about page (to avoid carousel weirdness)
-	await page.goto('http://127.0.0.1:5173/about');
+	await page.goto('/about');
 
 	// Click nav drop down
 	await page.locator('.main-nav-button').click();
@@ -38,7 +38,7 @@ test('Clicking nav link closes nav links dropdown', async ({ page }) => {
 
 test('Clicking logo closes nav links dropdown', async ({ page }) => {
 	// Go to about page (to avoid carousel weirdness)
-	await page.goto('http://127.0.0.1:5173/about');
+	await page.goto('/about');
 
 	// Click nav drop down
 	await page.locator('.main-nav-button').click();
@@ -51,7 +51,7 @@ test('Clicking logo closes nav links dropdown', async ({ page }) => {
 
 test('Clicking logo does not open nav links dropdown', async ({ page }) => {
 	// Go to about page (to avoid carousel weirdness)
-	await page.goto('http://127.0.0.1:5173/about');
+	await page.goto('/about');
 
 	// Click logo
 	await page.locator('img[class~="logo"]').click();
@@ -61,14 +61,14 @@ test('Clicking logo does not open nav links dropdown', async ({ page }) => {
 
 test('Displays down arrow icon in unexpanded state', async ({ page }) => {
 	// Go to about page (to avoid carousel weirdness)
-	await page.goto('http://127.0.0.1:5173/about');
+	await page.goto('/about');
 
 	await expect(page.locator('.main-nav-button span.icon')).toContainText('expand_more');
 });
 
 test('Displays up arrow icon in expanded state', async ({ page }) => {
 	// Go to about page (to avoid carousel weirdness)
-	await page.goto('http://127.0.0.1:5173/about');
+	await page.goto('/about');
 
 	// Click nav drop down
 	await page.locator('.main-nav-button').click();
@@ -78,7 +78,7 @@ test('Displays up arrow icon in expanded state', async ({ page }) => {
 
 test('Does not show current route in nav links drop down', async ({ page }) => {
 	// Go to about page (to avoid carousel weirdness)
-	await page.goto('http://127.0.0.1:5173/about');
+	await page.goto('/about');
 
 	// Click nav drop down
 	await page.locator('.main-nav-button').click();
@@ -90,7 +90,7 @@ test('Does not show button text in smaller screens', async ({ page }) => {
 	await page.setViewportSize(devices['iPhone SE'].viewport);
 
 	// Go to about page (to avoid carousel weirdness)
-	await page.goto('http://127.0.0.1:5173/about');
+	await page.goto('/about');
 
 	await expect(page.locator('.nav-button-text')).toBeHidden();
 });

tests/navigation.spec.ts

@@ -3,8 +3,8 @@ import { test, expect } from '@playwright/test';
 const routes = ['about', 'sponsorship', '2023', 'code-of-conduct'];
 for (const route of routes) {
 	test(`Can navigate to ${route} page from Home via the nav bar`, async ({ page }) => {
-		// Go to Home
-		await page.goto('http://127.0.0.1:5173/');
+		// Go to Home page
+		await page.goto('/');
 
 		// Click nav drop down
 		await page.locator('.main-nav-button').click();
@@ -18,7 +18,7 @@ for (const route of routes) {
 
 test('Can navigate to Home from content page by clicking logo', async ({ page }) => {
 	// Go to about page
-	await page.goto('http://127.0.0.1:5173/about');
+	await page.goto('/about');
 
 	// Click logo
 	await page.locator('img[class~="logo"]').click();

tests/page-previews.spec.ts

@@ -4,26 +4,26 @@ import { test, devices } from '@playwright/test';
 test('Captures Home preview - mobile', async ({ page }) => {
 	await page.setViewportSize(devices['iPhone SE'].viewport);
 
-	// Go to Home
-	await page.goto('http://127.0.0.1:5173/');
+	// Go to Home page
+	await page.goto('/');
 
 	await page.screenshot({ path: 'tests/page-previews/home-mobile.png', fullPage: true });
 });
 
 test('Captures Home preview - tablet', async ({ page }) => {
 	await page.setViewportSize(devices['iPad Mini'].viewport);
 
-	// Go to Home
-	await page.goto('http://127.0.0.1:5173/');
+	// Go to Home page
+	await page.goto('/');
 
 	await page.screenshot({ path: 'tests/page-previews/home-tablet.png', fullPage: true });
 });
 
 test('Captures Home preview - desktop', async ({ page }) => {
 	await page.setViewportSize(devices['Desktop Chrome'].viewport);
 
-	// Go to Home
-	await page.goto('http://127.0.0.1:5173/');
+	// Go to Home page
+	await page.goto('/');
 
 	await page.screenshot({ path: 'tests/page-previews/home-desktop.png', fullPage: true });
 });

vite.config.ts

@@ -1,6 +1,9 @@
 import { sveltekit } from '@sveltejs/kit/vite';
+import dns from 'dns'
 import type { UserConfig } from 'vite';
 
+dns.setDefaultResultOrder('verbatim')
+
 const config: UserConfig = {
 	plugins: [sveltekit()]
 };