writes tests to make sure player works and that the podcast flow works

package.json

@@ -8,6 +8,7 @@
 		"build": "prisma generate; vite build",
 		"preview": "vite preview",
 		"test": "playwright test",
+		"test:ui": "playwright test --ui",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"test:unit": "vitest",

src/routes/shows/+page.svelte

@@ -19,7 +19,7 @@
 
 <section>
 	<div class="list-heading">
-		<h3>All Episodes</h3>
+		<h1 class="h3">All Episodes</h1>
 
 		<div style="display:flex; gap: 10px;">
 			<SelectMenu

src/styles/base.css

@@ -8,7 +8,7 @@
 	}
 
 	*,
-	*::before,
+	*::before-,
 	*::after {
 		box-sizing: inherit;
 	}
@@ -101,26 +101,27 @@
 		font-weight: 900;
 	}
 
-	h1 {
+	h1, .h1 {
 		font-size: var(--font-size-xxxl);
 	}
-	h2 {
+	h2, .h2 {
 		font-size: var(--font-size-xxl);
 		font-weight: 700;
 	}
-	h3 {
+	h3, .h3 {
 		font-size: var(--font-size-xl);
 		font-weight: 700;
 	}
-	h4 {
+	h4, .h4 {
 		font-size: var(--font-size-lg);
 		font-weight: 400;
 		font-style: italic;
 	}
-	h5 {
+	h5, .h5 {
 		font-size: var(--font-size-md);
 	}
 
+	.h6,
 	h6,
 	p,
 	li {

tests/default.test.ts

@@ -5,7 +5,52 @@ test('index page has expected h1', async ({ page }) => {
 	await expect(page.getByRole('heading', { name: 'A Tasty Treats Podcast for Web Developers' })).toBeVisible();
 });
 
-test('index newsletter signup', async ({ page }) => {
+test('index newsletter signup exists', async ({ page }) => {
 	await page.goto('/');
 	await expect(page.getByRole('heading', { name: 'Join our newsletter' })).toBeVisible();
 });
+
+
+test('Got to podcast detail page', async ({ page }) => {
+	await page.goto('/');
+  // Click the navigation link named "Podcast"
+  await page.click('a:has-text("Podcast")');
+
+  // Check for an h1 with the text "All Episodes"
+  await expect(page.locator('h1:has-text("All Episodes")')).toBeVisible();
+
+  // Find the first link under the .list class and save the h4 value as title
+  const titleElement = await page.waitForSelector('.list a h4');
+  const title = await titleElement.textContent();
+
+  // Click the first link under the .list class
+  await page.click('.list a');
+
+  // Check the next page for an h1 with the same title
+  const h1Element = await page.waitForSelector(`h1:has-text("${title}")`);
+  const h1Text = await h1Element.textContent();
+  expect(h1Text).toBe(title);
+})
+
+test('Player works episode button and check if audio is playing', async ({ page }) => {
+  await page.goto('/'); // Navigate to the root page
+
+	const titleElement = await page.waitForSelector('.grid a h4');
+	const title = await titleElement.textContent();
+  // Click the button with text that includes "play episode" (case-insensitive)
+	await page.click('button:has-text("Play Episode")');
+
+
+  // Execute JavaScript within the page to check if the audio is playing
+  const isPlaying = await page.evaluate(() => {
+    const audioElement = document.querySelector('audio'); // Adjust the selector as needed
+    return !audioElement.paused; // Returns false if paused, true if playing
+  });
+
+  expect(isPlaying).toBe(true); // Assert that the audio is playing
+
+	const playerHeader = await page.waitForSelector('.player header p');
+	const playerTitle = await titleElement.textContent();
+	expect(playerTitle).toContain(title);
+
+});