try refactoring the authChecks tests

these tests (and others) were using an older more verbose playwright
api. playwright now recommends using aria-backed
selectors (`page.getByRole` instead of `page.locator`). i've also added some logic to the authChecks graphql test so that you
can run it more than one time in succession locally. before you'd have
to reset your database between runs.

lastly, i don't think the `Promise.race()` logic was correct. fixed here.

tasks/smoke-tests/auth/tests/authChecks.spec.ts

@@ -2,12 +2,16 @@ import { test, expect } from '@playwright/test'
 
 import { loginAsTestUser, signUpTestUser } from '../../shared/common'
 
-// Signs up a user before these tests
+const testUser = {
+  email: '[email protected]',
+  password: 'test123',
+  fullName: 'Test User',
+}
 
 test.beforeAll(async ({ browser }) => {
   const page = await browser.newPage()
 
-  await signUpTestUser({ page })
+  await signUpTestUser({ page, ...testUser })
 
   await page.close()
 })
@@ -20,7 +24,7 @@ test('useAuth hook, auth redirects checks', async ({ page }) => {
     `http://localhost:8910/login?redirectTo=/profile`
   )
 
-  await loginAsTestUser({ page })
+  await loginAsTestUser({ page, ...testUser })
 
   await page.goto('/profile')
 
@@ -41,14 +45,19 @@ test('useAuth hook, auth redirects checks', async ({ page }) => {
     '<td>Is Admin</td><td>false</td>'
   )
 
-  // Log Out
   await page.goto('/')
-  await page.click('text=Log Out')
-  await expect(await page.locator('text=Login')).toBeTruthy()
+  await page.getByText('Log Out').click()
+  await expect(page.getByText('Log In')).toBeVisible()
 })
 
+const post = {
+  title: 'Hello world! Soft kittens are the best.',
+  body: 'Bazinga, bazinga, bazinga',
+  authorId: '2',
+}
+
 test('requireAuth graphql checks', async ({ page }) => {
-  // Create posts
+  // Try to create a post as an anonymous user.
   await createNewPost({ page })
 
   await expect(
@@ -59,48 +68,36 @@ test('requireAuth graphql checks', async ({ page }) => {
 
   await page.goto('/')
 
-  await expect(
-    await page
-      .locator('article:has-text("Hello world! Soft kittens are the best.")')
-      .count()
-  ).toBe(0)
+  await expect(page.getByText(post.title)).not.toBeVisible()
 
-  await loginAsTestUser({
-    page,
-  })
+  // Now log in and try again.
+  await loginAsTestUser({ page, ...testUser })
 
   await createNewPost({ page })
 
   await page.goto('/')
-  await expect(
-    await page
-      .locator('article:has-text("Hello world! Soft kittens are the best.")')
-      .first()
-  ).not.toBeEmpty()
+
+  await expect(page.getByText(post.title)).toBeVisible()
+
+  // Delete the post to keep this test idempotent.
+  // Clicking "Delete" opens a confirmation dialog that we havee to accept.
+  await page.goto('/posts')
+
+  page.once('dialog', (dialog) => dialog.accept())
+
+  await page
+    .getByRole('row')
+    .filter({ has: page.getByText(post.title) })
+    .getByRole('button', { name: 'Delete' })
+    .click()
 })
 
 async function createNewPost({ page }) {
   await page.goto('/posts/new')
 
-  await page.locator('input[name="title"]').click()
-  await page
-    .locator('input[name="title"]')
-    .fill('Hello world! Soft kittens are the best.')
-  await page.locator('input[name="title"]').press('Tab')
-  await page.locator('input[name="body"]').fill('Bazinga, bazinga, bazinga')
-  await page.locator('input[name="authorId"]').fill('2')
-
-  const permissionError = page
-    .locator('.rw-form-error-title')
-    .locator(`text=You don't have permission to do that`)
-
-  // Either wait for success and redirect
-  // Or get the error
-  await Promise.all([
-    Promise.race([
-      page.waitForURL('**/'),
-      permissionError.waitFor({ timeout: 5000 }),
-    ]),
-    await page.click('text=SAVE'),
-  ])
+  await page.getByLabel('Title').fill(post.title)
+  await page.getByLabel('Body').fill(post.body)
+  await page.getByLabel('Author id').fill(post.authorId)
+
+  await page.getByRole('button', { name: 'Save' }).click()
 }

tasks/smoke-tests/shared/common.ts

@@ -59,31 +59,21 @@ export const signUpTestUser = async ({
 }: AuthUtilsParams) => {
   await page.goto('/signup')
 
-  await page.locator('input[name="username"]').click()
-  // Fill input[name="username"]
-  await page.locator('input[name="username"]').fill(email)
-  // Press Tab
-  await page.locator('input[name="username"]').press('Tab')
-  // Fill input[name="password"]
-  await page.locator('input[name="password"]').fill(password)
-  await page.locator('input[name="full-name"]').click()
-  await page.locator('input[name="full-name"]').fill(fullName)
-
-  const alreadyRegisteredErr = page.locator(
-    `text=Username \`${email}\` already in use`
-  )
-
-  // Either wait for signup to succeed and redirect
-  // Or get the username already registered error, either way is fine!
-  await Promise.all([
-    Promise.race([
-      page.waitForURL('**/'),
-      alreadyRegisteredErr.waitFor({ timeout: 5000 }),
-    ]),
-    page.locator('text=Sign Up').click(),
+  await page.getByLabel('Username').fill(email)
+  await page.getByLabel('Password').fill(password)
+  await page.getByLabel('Full Name').fill(fullName)
+
+  await page.getByRole('button', { name: 'Sign Up' }).click()
+
+  // Wait for either...
+  // - signup to succeed and redirect to the home page
+  // - an error message to appear in a toast
+  await Promise.race([
+    page.waitForURL('/'),
+    expect(
+      page.getByText(`Username \`${email}\` already in use`)
+    ).toBeVisible(),
   ])
-
-  console.log(`Signup successful for ${email}!`)
 }
 
 export const loginAsTestUser = async ({
@@ -93,18 +83,10 @@ export const loginAsTestUser = async ({
 }: AuthUtilsParams) => {
   await page.goto('/login')
 
-  // Click input[name="username"]
-  await page.locator('input[name="username"]').click()
-  // Fill input[name="username"]
-  await page.locator('input[name="username"]').fill(email)
-  // Click input[name="password"]
-  await page.locator('input[name="password"]').click()
-  // Fill input[name="password"]
-  await page.locator('input[name="password"]').fill(password)
-
-  // Click button:has-text("Login")
-  await Promise.all([
-    page.waitForURL('**/'),
-    page.locator('button:has-text("Login")').click(),
-  ])
+  await page.getByLabel('Username').fill(email)
+  await page.getByLabel('Password').fill(password)
+
+  await page.getByRole('button', { name: 'Login' }).click()
+
+  await page.waitForURL('/')
 }