test: minor e2e test enhancements

Author: mxschmitt

.github/workflows/run-tests.yml

@@ -16,7 +16,7 @@ jobs:
         with:
           node-version: 18
       - run: npm ci
-      - run: npx playwright install --with-deps
+      - run: npx playwright install --with-deps chromium
       - run: npx playwright test
       - uses: actions/upload-artifact@v3
         if: always()

playwright.config.ts

@@ -1,12 +1,10 @@
-import type { PlaywrightTestConfig } from '@playwright/test';
+import { defineConfig } from '@playwright/test';
 
-const config: PlaywrightTestConfig = {
+export default defineConfig({
 	webServer: {
 		command: 'npm run build && npm run preview',
 		port: 4173
 	},
 	testDir: 'tests',
 	testMatch: /(.+\.)?(test|spec)\.[jt]s/
-};
-
-export default config;
+});

tests/auth.test.ts

@@ -1,24 +1,27 @@
 import { expect, test, type Page } from "@playwright/test";
 
-test.describe("Auth", () => {
+test.describe.serial("Auth", () => {
   let page: Page;
   test.beforeAll(async ({ browser }) => {
     page = await browser.newPage();
     await page.goto("/auth-test");
   });
+  test.afterAll(async () => {
+    await page.close();
+  });
 
   test("Renders UI conditionally based on auth state", async () => {
-    expect(page.getByText("Signed In")).not.toBeVisible();
-    expect(page.getByText("Signed Out")).toBeVisible();
+    await expect(page.getByText("Signed Out")).toBeVisible();
+    await expect(page.getByText("Signed In")).toBeHidden();
   });
 
   test("User can sign in and out", async () => {
-    await page.click("text=Sign In");
-    await page.waitForSelector("text=Sign Out");
+    await page.getByRole("button", { name: "Sign In" }).click();
+    await expect(page.getByRole("button", { name: "Sign Out" })).toBeVisible();
     await expect(page.getByText("Signed In")).toBeVisible();
 
-    await page.click("text=Sign Out");
-    await page.waitForSelector("text=Sign In");
-    await expect(page.getByText("Signed In")).not.toBeVisible();
+    await page.getByRole("button", { name: "Sign Out" }).click();
+    await expect(page.getByRole("button", { name: "Sign In" })).toBeVisible();
+    await expect(page.getByText("Signed In")).toBeHidden();
   });
 });

tests/firestore.test.ts

@@ -1,23 +1,21 @@
 import { expect, test } from '@playwright/test';
 
-
 test('Renders a single document', async ({ page }) => {
 	await page.goto('/firestore-test');
-	await expect( page.getByTestId('doc-data') ).toContainText('Hi Mom');
-
+	await expect(page.getByTestId('doc-data')).toContainText('Hi Mom');
 });
 
 test('Renders a collection of items for an authenticated user in realtime', async ({ page }) => {
 	await page.goto('/firestore-test');
-    
-	await page.click('text=Sign In');
-	await expect( page.getByTestId('count') ).toContainText('0 posts');
-    (await page.waitForSelector('text=Add Post')).click();
-	await expect( page.getByTestId('count') ).toContainText('1 posts');
-	(await page.waitForSelector('text=Add Post')).click();
-	await expect( page.getByTestId('count') ).toContainText('2 posts');
-	expect( (await page.$$('li')).length ).toBe(2);
-	expect(await page.textContent('li')).toContain('firestore item');
-    
+	await page.getByRole('button', { 'name': 'Sign In'}).click();
+	await expect(page.getByTestId('count')).toContainText('0 posts');
+	await page.getByRole('button', { name: 'Add Post' }).click();
+	await expect(page.getByTestId('count')).toContainText('1 posts');
+	await page.getByRole('button', { name: 'Add Post' }).click();
+	await expect(page.getByTestId('count')).toContainText('2 posts');
+	await expect(page.locator('li')).toHaveCount(2);
+	await expect(page.locator('li')).toContainText([
+		'firestore item',
+		'firestore item'
+	]);
 });
-

tests/main.test.ts

@@ -2,11 +2,11 @@ import { expect, test } from '@playwright/test';
 
 test('SvelteFire app initializes properly', async ({ page }) => {
 	await page.goto('/');
-	expect(await page.textContent('h1')).toBe('Welcome to SvelteFire');
+	await expect(page.locator('h1')).toHaveText('Welcome to SvelteFire');
 });
 
 test('Firebase SDK context is defined via FirebaseApp component', async ({ page }) => {
 	await page.goto('/');
-	await expect( page.getByTestId('auth')).toContainText('true');
-	await expect( page.getByTestId('firestore')).toContainText('true');
-});
+	await expect(page.getByTestId('auth')).toContainText('true');
+	await expect(page.getByTestId('firestore')).toContainText('true');
+});