Playwright tests reliability (#49)

Co-authored-by: me <me@kentcdodds.com>
Co-authored-by: Cursor Agent <cursoragent@cursor.com>

Author: kentcdodds

playwright.config.ts

@@ -54,6 +54,7 @@ export default defineConfig({
 		timeout: 120 * 1000,
 		env: {
 			PORT,
+			PLAYWRIGHT_TEST_BASE_URL: `http://localhost:${PORT}`,
 		},
 	},
 })

tests/db-utils.ts

@@ -4,6 +4,17 @@ import { UniqueEnforcer } from 'enforce-unique'
 import { type PrismaClient } from '#app/utils/prisma-generated.server/client.ts'
 
 const uniqueUsernameEnforcer = new UniqueEnforcer()
+const uniquePhoneEnforcer = new UniqueEnforcer()
+
+export function createPhoneNumber({
+	countryCode = '+1',
+	includeCountryCode = true,
+}: { countryCode?: string; includeCountryCode?: boolean } = {}) {
+	return uniquePhoneEnforcer.enforce(() => {
+		const digits = faker.string.numeric({ length: 10, allowLeadingZeros: true })
+		return includeCountryCode ? `${countryCode}${digits}` : digits
+	})
+}
 
 export function createUser() {
 	const firstName = faker.person.firstName()
@@ -26,7 +37,7 @@ export function createUser() {
 	return {
 		username,
 		name: `${firstName} ${lastName}`,
-		phoneNumber: faker.phone.number(),
+		phoneNumber: createPhoneNumber(),
 	}
 }
 
@@ -48,7 +59,7 @@ export function createMessage() {
 
 export function createRecipient() {
 	return {
-		phoneNumber: faker.phone.number(),
+		phoneNumber: createPhoneNumber(),
 		name: faker.person.fullName(),
 		verified: faker.datatype.boolean(),
 		// TODO: make sure this doesn't generate a cron string that's too frequent

tests/e2e/onboarding.test.ts

@@ -2,7 +2,12 @@ import { invariant } from '@epic-web/invariant'
 import { faker } from '@faker-js/faker'
 import { prisma } from '#app/utils/db.server.ts'
 import { deleteText, waitForText } from '#tests/mocks/utils.ts'
-import { test as base, createUser, expect } from '#tests/playwright-utils.ts'
+import {
+	test as base,
+	createPhoneNumber,
+	createUser,
+	expect,
+} from '#tests/playwright-utils.ts'
 
 const URL_REGEX = /(?<url>https?:\/\/[^\s$.?#].[^\s]*)/
 const CODE_REGEX = /code: (?<code>[\d\w]+)/
@@ -16,6 +21,9 @@ function formatPhoneNumber(
 	countryCode = defaultCountryCode,
 ) {
 	const digitsOnly = phoneNumber.replace(/\D/g, '')
+	if (phoneNumber.trim().startsWith('+')) {
+		return `+${digitsOnly}`.replace(/\s+/g, '')
+	}
 	return `${countryCode}${digitsOnly}`.replace(/\s+/g, '')
 }
 
@@ -29,21 +37,23 @@ const test = base.extend<{
 }>({
 	getOnboardingData: async ({}, use) => {
 		const userData = createUser()
+		const phoneNumber = createPhoneNumber({ includeCountryCode: false })
 		// Clean up any stale text fixtures for this phone number before test
-		await deleteText(userData.phoneNumber)
-		await deleteText(formatPhoneNumber(userData.phoneNumber))
+		await deleteText(phoneNumber)
+		await deleteText(formatPhoneNumber(phoneNumber))
 		// eslint-disable-next-line react-hooks/rules-of-hooks
 		await use(() => {
 			const onboardingData = {
 				...userData,
+				phoneNumber,
 				password: faker.internet.password(),
 			}
 			return onboardingData
 		})
 		await prisma.user.deleteMany({ where: { username: userData.username } })
 		// Clean up text fixtures after test
-		await deleteText(userData.phoneNumber)
-		await deleteText(formatPhoneNumber(userData.phoneNumber))
+		await deleteText(phoneNumber)
+		await deleteText(formatPhoneNumber(phoneNumber))
 	},
 })
 

tests/e2e/send.test.ts

@@ -39,24 +39,25 @@ test('Users can write and send a message immediately', async ({
 
 	await page.waitForLoadState('domcontentloaded')
 
-	const { content: textMessageContent } = createMessage()
+	const textMessageContent = `Test message ${faker.string.alphanumeric(8)}`
 	const messageTextbox = page.getByRole('textbox', { name: /message/i })
 	await messageTextbox.waitFor({ state: 'visible' })
-	await messageTextbox.fill(textMessageContent)
-
-	await page.getByRole('button', { name: /save/i }).click()
-	await waitFor(
-		async () => {
-			const createdMessage = await prisma.message.findFirst({
-				select: { id: true },
-				where: { recipientId: recipient.id, content: textMessageContent },
-			})
-			if (createdMessage) return createdMessage
-		},
-		{ timeout: 15000, errorMessage: 'Message not created' },
-	)
-	await page.goto(`/recipients/${recipient.id}`)
+	await messageTextbox.click()
+	await messageTextbox.fill('')
+	await messageTextbox.type(textMessageContent, { delay: 5 })
+	await expect(messageTextbox).toHaveValue(textMessageContent)
+
+	await Promise.all([
+		page.waitForURL(`/recipients/${recipient.id}`, {
+			timeout: 30000,
+			waitUntil: 'domcontentloaded',
+		}),
+		page.getByRole('button', { name: /save/i }).click(),
+	])
 	await page.waitForLoadState('domcontentloaded')
+	await expect(page.getByText(textMessageContent)).toBeVisible({
+		timeout: 20000,
+	})
 
 	const sendNowButton = page.getByRole('button', { name: /send now/i })
 	await sendNowButton.waitFor({ state: 'visible' })

tests/e2e/settings-profile.test.ts

@@ -3,7 +3,7 @@ import { faker } from '@faker-js/faker'
 import { verifyUserPassword } from '#app/utils/auth.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
 import { deleteText, waitForText } from '#tests/mocks/utils.ts'
-import { createUser, expect, test } from '#tests/playwright-utils.ts'
+import { createPhoneNumber, createUser, expect, test } from '#tests/playwright-utils.ts'
 
 const CODE_REGEX = /Here's your verification code: (?<code>[\d\w]+)/
 
@@ -68,7 +68,7 @@ test('Users can update their password', async ({ page, login }) => {
 
 test('Users can change their phone number', async ({ page, login }) => {
 	const preUpdateUser = await login()
-	const newPhoneNumber = faker.phone.number()
+	const newPhoneNumber = createPhoneNumber()
 	expect(preUpdateUser.phoneNumber).not.toEqual(newPhoneNumber)
 
 	// Clean up any stale fixtures for both phone numbers