@live-change/user-frontend 0.9.203 → 0.9.205

package/e2e/connectEmailCode.test.ts

@@ -1,10 +1,10 @@
-import test from 'node:test'
+import { e2eSuite, test } from './e2eSuite.js'
+import { waitForHydration } from '@live-change/e2e-test'
 import assert from 'node:assert'
 import App from '@live-change/framework'
 import randomProfile from 'random-profile-generator'
 import { withBrowser } from './withBrowser.js'
-import { useSecretCode, sleep } from './steps.js'
-import { e2eSuite } from './e2eSuite.js'
+import { useSecretCode } from './steps.js'
 
 const app = App.app()
 const email = randomProfile.profile().firstName.toLowerCase() + '@test.com'
@@ -23,6 +23,7 @@ e2eSuite('connectEmailCode', () => {
     await User.create({ id: user, roles: [] })
     await Email.create({ id: email, email, user })
     await page.goto(env.url + '/', { waitUntil: 'networkidle' })
+    await waitForHydration(page)
     const session = await page.evaluate(
       () => (window as unknown as { api: { client: { value: { session: string } } } }).api.client.value.session
     )
@@ -30,17 +31,19 @@ e2eSuite('connectEmailCode', () => {
 
     // Reload so client gets user from server; otherwise router redirects to sign-in when opening /user/settings/connected
     await page.reload({ waitUntil: 'networkidle' })
+    await waitForHydration(page)
     await page.goto(env.url + '/user/settings/connected', { waitUntil: 'networkidle' })
+    await waitForHydration(page)
     await page.getByText(email).waitFor({ state: 'visible', timeout: 15000 })
     assert.strictEqual(await page.getByText(email2).isVisible(), false, 'email2 should not be visible')
 
-    await page.click('button#connect')
-    assert.ok(page.url().includes('/connect'))
+    await page.getByRole('link', { name: /add email/i }).first().click()
+    await page.waitForURL(/connect-email/, { timeout: 15000 })
 
     if (!happyPath) {
       await page.fill('input#email', email)
       await page.click('button[type=submit]')
-      assert.ok(page.url().includes('/connect'))
+      assert.ok(page.url().includes('connect-email'))
     }
 
     await page.fill('input#email', email2)
@@ -56,11 +59,12 @@ e2eSuite('connectEmailCode', () => {
     assert.strictEqual((authenticationData as { messageData?: { user: string } })?.messageData?.user, user, 'authentication contains user')
 
     await useSecretCode(page, env, authentication, happyPath)
-    await page.waitForURL('**/connect-finished', { timeout: 10000 })
+    await page.waitForURL('**/connect-finished', { timeout: 30000 })
     assert.ok(page.url().includes('/connect-finished'))
 
     if (!happyPath) {
       await page.goto(url, { waitUntil: 'networkidle' })
+      await waitForHydration(page)
       assert.ok(page.url().includes('/connect-finished'))
     }
   })

package/e2e/connectEmailLink.test.ts

@@ -1,10 +1,10 @@
-import test from 'node:test'
+import { e2eSuite, test } from './e2eSuite.js'
+import { waitForHydration } from '@live-change/e2e-test'
 import assert from 'node:assert'
 import App from '@live-change/framework'
 import randomProfile from 'random-profile-generator'
 import { withBrowser } from './withBrowser.js'
 import { useSecretLink } from './steps.js'
-import { e2eSuite } from './e2eSuite.js'
 
 const app = App.app()
 const email = randomProfile.profile().firstName.toLowerCase() + '@test.com'
@@ -23,26 +23,31 @@ e2eSuite('connectEmailLink', () => {
     await User.create({ id: user, roles: [] })
     await Email.create({ id: email, email, user })
     await page.goto(env.url + '/', { waitUntil: 'networkidle' })
+    await waitForHydration(page)
     const session = await page.evaluate(
       () => (window as unknown as { api: { client: { value: { session: string } } } }).api.client.value.session
     )
     await AuthenticatedUser.create({ id: session, user, session })
 
     await page.reload({ waitUntil: 'networkidle' })
+    await waitForHydration(page)
     await page.goto(env.url + '/user/settings/connected', { waitUntil: 'networkidle' })
+    await waitForHydration(page)
     await page.getByText(email).waitFor({ state: 'visible', timeout: 15000 })
     assert.strictEqual(await page.getByText(email2).isVisible(), false, 'email2 should not be visible')
-
-    await page.click('button#connect')
-    assert.ok(page.url().includes('/connect'))
+      
+    await page.locator('[data-testid="connect-email"]').first().click()
+    await page.waitForURL(/connect-email/, { timeout: 15000 })
 
     if (!happyPath) {
       await page.fill('input#email', email)
       await page.click('button[type=submit]')
+      assert.ok(page.url().includes('connect-email'))
     }
 
     await page.fill('input#email', email2)
     await page.click('button[type=submit]')
+    await page.waitForURL('**/sent/*', { timeout: 10000 })
     assert.ok(page.url().includes('/sent/'))
 
     const url = page.url()
@@ -53,11 +58,12 @@ e2eSuite('connectEmailLink', () => {
     assert.strictEqual((authenticationData as { messageData?: { user: string } })?.messageData?.user, user, 'authentication contains user')
 
     const linkData = await useSecretLink(page, env, authentication, happyPath)
-    await page.waitForURL('**/connect-finished', { timeout: 10000 })
+    await page.waitForURL('**/connect-finished', { timeout: 30000 })
     assert.ok(page.url().includes('/connect-finished'))
 
     if (!happyPath) {
       await page.goto(env.url + '/user/link/' + linkData.secretCode, { waitUntil: 'networkidle' })
+      await waitForHydration(page)
       await page.getByText('Link used').waitFor({ state: 'visible' })
     }
   })

package/e2e/delete.test.ts

@@ -1,9 +1,9 @@
-import test from 'node:test'
+import { e2eSuite, test } from './e2eSuite.js'
+import { waitForHydration } from '@live-change/e2e-test'
 import assert from 'node:assert'
 import App from '@live-change/framework'
 import randomProfile from 'random-profile-generator'
 import { withBrowser } from './withBrowser.js'
-import { e2eSuite } from './e2eSuite.js'
 
 const app = App.app()
 const name = randomProfile.profile().firstName.toLowerCase()
@@ -21,19 +21,22 @@ e2eSuite('delete', () => {
     await User.create({ id: user, roles: [] })
     await Email.create({ id: email, email, user })
     await page.goto(env.url + '/', { waitUntil: 'networkidle' })
+    await waitForHydration(page)
     const session = await page.evaluate(
       () => (window as unknown as { api: { client: { value: { session: string } } } }).api.client.value.session
     )
     await AuthenticatedUser.create({ id: session, user, session })
 
     await page.reload({ waitUntil: 'networkidle' })
+    await waitForHydration(page)
     const clientUser = await page.evaluate(
       () => (window as unknown as { api: { client: { value: { user: string } } } }).api.client.value.user
     )
     assert.strictEqual(user, clientUser, 'client logged in')
 
     await page.goto(env.url + '/user/settings/delete', { waitUntil: 'networkidle' })
-    await page.click('.p-checkbox-box')
+    await waitForHydration(page)
+    await page.getByRole('checkbox').check()
     await page.click('button#delete')
     await page.waitForURL('**/delete-finished', { timeout: 10000 })
 

package/e2e/disconnectEmail.test.ts

@@ -1,15 +1,14 @@
-import test from 'node:test'
+import { e2eSuite, test } from './e2eSuite.js'
+import { waitForHydration } from '@live-change/e2e-test'
 import assert from 'node:assert'
 import App from '@live-change/framework'
 import randomProfile from 'random-profile-generator'
 import { withBrowser } from './withBrowser.js'
-import { e2eSuite } from './e2eSuite.js'
 
 const app = App.app()
 const name = randomProfile.profile().firstName.toLowerCase()
 const email = name + '@test.com'
 const email2 = name + '2@test.com'
-const happyPath = false
 
 e2eSuite('disconnectEmail', () => {
   test('disconnect email', async () => {
@@ -24,23 +23,23 @@ e2eSuite('disconnectEmail', () => {
     await Email.create({ id: email, email, user })
     await Email.create({ id: email2, email: email2, user })
     await page.goto(env.url + '/', { waitUntil: 'networkidle' })
+    await waitForHydration(page)
     const session = await page.evaluate(
       () => (window as unknown as { api: { client: { value: { session: string } } } }).api.client.value.session
     )
     await AuthenticatedUser.create({ id: session, user, session })
 
     await page.reload({ waitUntil: 'networkidle' })
+    await waitForHydration(page)
     await page.goto(env.url + '/user/settings/connected', { waitUntil: 'networkidle' })
-    await page.getByText(email).waitFor({ state: 'visible' })
-    await page.getByText(email2).waitFor({ state: 'visible' })
+    await waitForHydration(page)
+    await page.getByText(email, { exact: true }).waitFor({ state: 'visible' })
+    await page.getByText(email2, { exact: true }).waitFor({ state: 'visible' })
 
-    await page.click('span.pi-times')
-    await page.click('text=Yes')
-    assert.strictEqual(await page.getByText(email2).isVisible(), false, 'email2 should not be visible')
-
-    if (!happyPath) {
-      await page.locator('span.pi-times').waitFor({ state: 'hidden' })
-    }
+    await page.locator('li').filter({ hasText: email }).locator('button.p-button-rounded').click()
+    await page.locator('[role="alertdialog"] button.p-button-danger').last().click({ force: true })
+    assert.strictEqual(await page.getByText(email, { exact: true }).isVisible(), false, 'disconnected email should be gone')
+    assert.strictEqual(await page.getByText(email2, { exact: true }).isVisible(), true, 'other email should remain')
   })
   })
 })

package/e2e/e2eSuite.ts

@@ -1,12 +1,8 @@
-import { after, describe } from 'node:test'
-import { disposeTestEnv } from './env.js'
-
-export function e2eSuite(name: string, define: () => void): void {
-  describe(name, () => {
-    after(async () => {
-      await disposeTestEnv()
-      process.exit(0)
-    })
-    define()
-  })
-}
+export {
+  e2eSuite,
+  getE2ERegistry,
+  resetE2ERegistry,
+  setCurrentE2EFile,
+  test,
+  type E2ETestDefinition
+} from '@live-change/e2e-test'

package/e2e/env.ts

@@ -1,25 +1,13 @@
 import path from 'path'
 import { fileURLToPath } from 'url'
+import App from '@live-change/framework'
 import { TestServer } from '@live-change/server'
+import { createTestEnvHelpers, waitForServerReady } from '@live-change/e2e-test'
 import appConfig from '../server/app.config.js'
 import * as services from '../server/services.list.js'
 
-const READY_TIMEOUT_MS = 60000
-const READY_POLL_MS = 2000
-
-async function waitForServerReady(url: string): Promise<void> {
-  const deadline = Date.now() + READY_TIMEOUT_MS
-  while (Date.now() < deadline) {
-    try {
-      const res = await fetch(url)
-      if (res.ok) return
-    } catch {
-      // not ready yet
-    }
-    await new Promise((r) => setTimeout(r, READY_POLL_MS))
-  }
-  throw new Error(`Server at ${url} did not become ready within ${READY_TIMEOUT_MS}ms`)
-}
+const appRuntime = App.app()
+const internalE2EClient = { internal: true, roles: ['admin'] as const }
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 const serverDir = path.join(__dirname, '..', 'server')
@@ -29,16 +17,34 @@ for (const serviceConfig of appConfig.services) {
   const name = (serviceConfig as { name: string }).name
   ;(serviceConfig as { module?: unknown }).module = (services as Record<string, unknown>)[name]
 }
-;(appConfig as { init?: (s: unknown) => Promise<void> }).init = (services as { init: (s: unknown) => Promise<void> }).init
+;(appConfig as { init?: (s: unknown) => Promise<void> }).init =
+  (services as { init: (s: unknown) => Promise<void> }).init
 
 export type TestEnv = {
   server: InstanceType<typeof TestServer>
   url: string
-  haveService: (name: string) => { name: string; models: Record<string, { get: (id: string) => Promise<unknown> }>; views: Record<string, unknown>; actions: Record<string, unknown>; triggers: Record<string, unknown> }
-  haveModel: (serviceName: string, modelName: string) => { get: (id: string) => Promise<unknown>; create: (data: unknown) => Promise<unknown>; update: (id: string, data: unknown) => Promise<unknown>; delete: (id: string) => Promise<unknown>; indexObjectGet: (index: string, key: unknown, opts?: unknown) => Promise<unknown>; indexRangeGet: (index: string, key: unknown) => Promise<unknown[]>; definition: { properties: Record<string, { preFilter: (v: unknown) => unknown }> } }
+  haveService: (name: string) => {
+    name: string
+    models: Record<string, { get: (id: string) => Promise<unknown> }>
+    views: Record<string, unknown>
+    actions: Record<string, unknown>
+    triggers: Record<string, unknown>
+  }
+  haveModel: (
+    serviceName: string,
+    modelName: string
+  ) => {
+    get: (id: string) => Promise<unknown>
+    create: (data: unknown) => Promise<unknown>
+    update: (id: string, data: unknown) => Promise<unknown>
+    delete: (id: string) => Promise<unknown>
+    indexObjectGet: (index: string, key: unknown, opts?: unknown) => Promise<unknown>
+    indexRangeGet: (index: string, key: unknown) => Promise<unknown[]>
+    definition: { properties: Record<string, { preFilter: (v: unknown) => unknown }> }
+  }
   haveView: (serviceName: string, viewName: string) => unknown
-  haveAction: (serviceName: string, actionName: string) => unknown
-  haveTrigger: (serviceName: string, triggerName: string) => unknown
+  haveAction: (serviceName: string, actionName: string) => (data: unknown) => Promise<unknown>
+  haveTrigger: (serviceName: string, triggerName: string) => (data: unknown) => Promise<unknown>
   grabObject: (serviceName: string, modelName: string, id: string) => Promise<unknown>
 }
 
@@ -48,23 +54,11 @@ let envPromise: Promise<TestEnv> | null = null
 let testServer: TestServerInstance | null = null
 
 export async function disposeTestEnv(): Promise<void> {
-  const server = testServer
+  const s = testServer
+  if (!s) return
   testServer = null
   envPromise = null
-  if (server) await server.dispose()
-}
-
-function haveService(server: InstanceType<typeof TestServer>, name: string) {
-  const service = server.apiServer.services.services.find((s: { name: string }) => s.name === name)
-  if (!service) throw new Error('service ' + name + ' not found')
-  return service
-}
-
-function haveModel(server: InstanceType<typeof TestServer>, serviceName: string, modelName: string) {
-  const service = haveService(server, serviceName)
-  const model = service.models[modelName]
-  if (!model) throw new Error('model ' + modelName + ' not found')
-  return model
+  await s.dispose()
 }
 
 export async function getTestEnv(): Promise<TestEnv> {
@@ -96,33 +90,37 @@ export async function getTestEnv(): Promise<TestEnv> {
     })
 
     const url = server.url!
+    const helpers = createTestEnvHelpers(server)
     return {
       server,
       url,
-      haveService: (name: string) => haveService(server, name),
-      haveModel: (serviceName: string, modelName: string) => haveModel(server, serviceName, modelName),
-      haveView: (serviceName: string, viewName: string) => {
-        const service = haveService(server, serviceName)
-        const view = service.views[viewName]
-        if (!view) throw new Error('view ' + viewName + ' not found')
-        return view
-      },
-      haveAction: (serviceName: string, actionName: string) => {
-        const service = haveService(server, serviceName)
-        const action = service.actions[actionName]
-        if (!action) throw new Error('action ' + actionName + ' not found')
-        return action
+      haveService: helpers.haveService,
+      haveModel: helpers.haveModel,
+      haveView: helpers.haveView,
+      haveAction(serviceName: string, actionName: string) {
+        const action = helpers.haveAction(serviceName, actionName) as {
+          callCommand: (parameters: unknown, clientData: unknown) => Promise<unknown>
+        }
+        return (parameters: unknown) => {
+          const p = parameters as Record<string, unknown> & { _e2eGrantUser?: string }
+          const { _e2eGrantUser, ...commandParams } = p
+          const client = _e2eGrantUser
+            ? { ...internalE2EClient, user: _e2eGrantUser as string }
+            : internalE2EClient
+          return action.callCommand(commandParams, client).then((res: unknown) => {
+            if (typeof res === 'string') return { id: res }
+            return res
+          })
+        }
       },
-      haveTrigger: (serviceName: string, triggerName: string) => {
-        const service = haveService(server, serviceName)
-        const trigger = service.triggers[triggerName]
-        if (!trigger) throw new Error('trigger ' + triggerName + ' not found')
-        return trigger
+      haveTrigger(serviceName: string, triggerName: string) {
+        return (data: unknown) =>
+          appRuntime.triggerService(
+            { service: serviceName, type: triggerName, client: internalE2EClient },
+            data as Record<string, unknown>
+          )
       },
-      grabObject: async (serviceName: string, modelName: string, id: string) => {
-        const model = haveModel(server, serviceName, modelName)
-        return await model.get(id)
-      }
+      grabObject: helpers.grabObject
     }
   })()
   return envPromise

package/e2e/execution-time-report.ts

@@ -0,0 +1,7 @@
+import { runE2E } from './runner.js'
+
+runE2E(['--report-time', 'e2e/*.test.ts'])
+  .then((code) => process.exit(code))
+  .catch((error) => {
+    throw error
+  })

package/e2e/resetPasswordWithEmailCode.test.ts

@@ -1,11 +1,11 @@
-import test from 'node:test'
+import { e2eSuite, test } from './e2eSuite.js'
+import { waitForHydration } from '@live-change/e2e-test'
 import assert from 'node:assert'
 import App from '@live-change/framework'
 import randomProfile from 'random-profile-generator'
 import passwordGenerator from 'generate-password'
 import { withBrowser } from './withBrowser.js'
-import { useSecretCode } from './steps.js'
-import { e2eSuite } from './e2eSuite.js'
+import { setPrimePasswordFieldValue, useSecretCode } from './steps.js'
 
 const app = App.app()
 const email = randomProfile.profile().firstName.toLowerCase() + '@test.com'
@@ -21,8 +21,10 @@ e2eSuite('resetPasswordWithEmailCode', () => {
     await User.create({ id: user, roles: [] })
     await Email.create({ id: email, email, user })
     await page.goto(env.url + '/', { waitUntil: 'networkidle' })
+    await waitForHydration(page)
 
     await page.goto(env.url + '/user/reset-password', { waitUntil: 'networkidle' })
+    await waitForHydration(page)
     await page.fill('input#email', email)
     await page.click('button[type=submit]')
     await page.waitForURL('**/sent/*', { timeout: 10000 })
@@ -49,12 +51,12 @@ e2eSuite('resetPasswordWithEmailCode', () => {
     const resetPasswordAuthenticationData = await ResetPasswordAuthentication.indexObjectGet('byKey', resetPasswordAuthentication)
     assert.ok(resetPasswordAuthenticationData, 'reset password authentication created')
 
-    await page.getByText('Reset password').waitFor({ state: 'visible' })
+    await page.getByText('Reset password', { exact: false }).first().waitFor({ state: 'visible' })
 
     const password =
       passwordGenerator.generate({ length: 10, numbers: true }) + (Math.random() * 10).toFixed()
-    await page.locator('input[type="password"]').nth(0).fill(password)
-    await page.locator('input[type="password"]').nth(1).fill(password)
+    await setPrimePasswordFieldValue(page, '#newPassword', password)
+    await setPrimePasswordFieldValue(page, '#reenterPassword', password)
     await page.click('button[type=submit]')
     await page.waitForURL('**/reset-password-finished', { timeout: 10000 })
     assert.ok(page.url().includes('/reset-password-finished'))

package/e2e/resetPasswordWithEmailLink.test.ts

@@ -1,11 +1,11 @@
-import test from 'node:test'
+import { e2eSuite, test } from './e2eSuite.js'
+import { waitForHydration } from '@live-change/e2e-test'
 import assert from 'node:assert'
 import App from '@live-change/framework'
 import randomProfile from 'random-profile-generator'
 import passwordGenerator from 'generate-password'
 import { withBrowser } from './withBrowser.js'
-import { useSecretLink } from './steps.js'
-import { e2eSuite } from './e2eSuite.js'
+import { setPrimePasswordFieldValue, useSecretLink } from './steps.js'
 
 const app = App.app()
 const email = randomProfile.profile().firstName.toLowerCase() + '@test.com'
@@ -21,8 +21,10 @@ e2eSuite('resetPasswordWithEmailLink', () => {
     await User.create({ id: user, roles: [] })
     await Email.create({ id: email, email, user })
     await page.goto(env.url + '/', { waitUntil: 'networkidle' })
+    await waitForHydration(page)
 
     await page.goto(env.url + '/user/reset-password', { waitUntil: 'networkidle' })
+    await waitForHydration(page)
     await page.fill('input#email', email)
     await page.click('button[type=submit]')
     await page.waitForURL('**/sent/*', { timeout: 10000 })
@@ -49,12 +51,12 @@ e2eSuite('resetPasswordWithEmailLink', () => {
     const resetPasswordAuthenticationData = await ResetPasswordAuthentication.indexObjectGet('byKey', resetPasswordAuthentication)
     assert.ok(resetPasswordAuthenticationData, 'reset password authentication created')
 
-    await page.getByText('Reset password').waitFor({ state: 'visible' })
+    await page.getByText('Reset password', { exact: false }).first().waitFor({ state: 'visible' })
 
     const password =
       passwordGenerator.generate({ length: 10, numbers: true }) + (Math.random() * 10).toFixed()
-    await page.locator('input[type="password"]').nth(0).fill(password)
-    await page.locator('input[type="password"]').nth(1).fill(password)
+    await setPrimePasswordFieldValue(page, '#newPassword', password)
+    await setPrimePasswordFieldValue(page, '#reenterPassword', password)
     await page.click('button[type=submit]')
     await page.waitForURL('**/reset-password-finished', { timeout: 10000 })
     assert.ok(page.url().includes('/reset-password-finished'))

package/e2e/runner.ts

@@ -0,0 +1,10 @@
+import { createRunner } from '@live-change/e2e-test'
+import { disposeTestEnv, getTestEnv } from './env.js'
+
+const runner = createRunner({
+  setupEnv: getTestEnv,
+  teardownEnv: disposeTestEnv
+})
+
+export const runE2E = runner.runE2E
+await runner.runCli(import.meta.url, process.argv.slice(2))

package/e2e/setPassword.test.ts

@@ -1,10 +1,11 @@
-import test from 'node:test'
+import { e2eSuite, test } from './e2eSuite.js'
+import { waitForHydration } from '@live-change/e2e-test'
 import assert from 'node:assert'
 import App from '@live-change/framework'
 import randomProfile from 'random-profile-generator'
 import passwordGenerator from 'generate-password'
+import { setPrimePasswordFieldValue } from './steps.js'
 import { withBrowser } from './withBrowser.js'
-import { e2eSuite } from './e2eSuite.js'
 
 const app = App.app()
 const name = randomProfile.profile().firstName.toLowerCase()
@@ -22,12 +23,14 @@ e2eSuite('setPassword', () => {
     await User.create({ id: user, roles: [] })
     await Email.create({ id: email, email, user })
     await page.goto(env.url + '/', { waitUntil: 'networkidle' })
+    await waitForHydration(page)
     const session = await page.evaluate(
       () => (window as unknown as { api: { client: { value: { session: string } } } }).api.client.value.session
     )
     await AuthenticatedUser.create({ id: session, user, session })
 
     await page.reload({ waitUntil: 'networkidle' })
+    await waitForHydration(page)
     const clientUser = await page.evaluate(
       () => (window as unknown as { api: { client: { value: { user: string } } } }).api.client.value.user
     )
@@ -37,28 +40,32 @@ e2eSuite('setPassword', () => {
     assert.strictEqual(emptyPasswordAuthenticationData, null, 'password not set')
 
     await page.goto(env.url + '/user/settings/change-password', { waitUntil: 'networkidle' })
-    await page.getByText('Set password').waitFor({ state: 'visible' })
+    await waitForHydration(page)
+    await page.waitForSelector('#newPassword input', { state: 'visible', timeout: 20000 })
 
     const firstPassword =
       passwordGenerator.generate({ length: 10, numbers: true }) + (Math.random() * 10).toFixed()
-    await page.locator('input[type="password"]').nth(0).fill(firstPassword)
-    await page.locator('input[type="password"]').nth(1).fill(firstPassword)
-    await page.click('button[type=submit]')
-    assert.ok(page.url().includes('/user/settings/change-password-finished'))
+    await setPrimePasswordFieldValue(page, '#newPassword', firstPassword)
+    await setPrimePasswordFieldValue(page, '#reenterPassword', firstPassword)
+    await Promise.all([
+      page.waitForURL((u) => u.pathname.includes('/user/settings/change-password-finished'), { timeout: 20000 }),
+      page.locator('button[type="submit"]').click()
+    ])
 
     await new Promise((r) => setTimeout(r, 200))
     const firstPasswordAuthenticationData = await PasswordAuthentication.get(user)
     assert.ok(firstPasswordAuthenticationData, 'password set')
 
     await page.goto(env.url + '/user/settings/change-password', { waitUntil: 'networkidle' })
-    await page.getByText('Change password').waitFor({ state: 'visible' })
+    await waitForHydration(page)
+    await page.waitForSelector('#currentPassword input', { state: 'visible', timeout: 20000 })
 
     const secondPassword =
       passwordGenerator.generate({ length: 10, numbers: true }) + (Math.random() * 10).toFixed()
-    await page.locator('input[type="password"]').nth(0).fill(firstPassword)
-    await page.locator('input[type="password"]').nth(1).fill(secondPassword)
-    await page.locator('input[type="password"]').nth(2).fill(secondPassword)
-    await page.click('button[type=submit]')
+    await setPrimePasswordFieldValue(page, '#currentPassword', firstPassword)
+    await setPrimePasswordFieldValue(page, '#newPassword', secondPassword)
+    await setPrimePasswordFieldValue(page, '#reenterPassword', secondPassword)
+    await page.locator('button[type="submit"]').click()
 
     await new Promise((r) => setTimeout(r, 200))
     const secondPasswordAuthenticationData = await PasswordAuthentication.get(user)

package/e2e/signInEmailCode.test.ts

@@ -1,10 +1,10 @@
-import test from 'node:test'
+import { e2eSuite, test } from './e2eSuite.js'
+import { waitForHydration } from '@live-change/e2e-test'
 import assert from 'node:assert'
 import App from '@live-change/framework'
 import randomProfile from 'random-profile-generator'
 import { withBrowser } from './withBrowser.js'
 import { useSecretCode } from './steps.js'
-import { e2eSuite } from './e2eSuite.js'
 
 const app = App.app()
 const randomUserData = randomProfile.profile()
@@ -25,6 +25,7 @@ e2eSuite('signInEmailCode', () => {
     await Email.create({ id: email, email, user })
 
     await page.goto(env.url + '/user/sign-in-email', { waitUntil: 'networkidle' })
+    await waitForHydration(page)
     await page.fill('input#email', email)
     await page.click('button[type=submit]')
     await page.waitForURL('**/sent/*', { timeout: 10000 })
@@ -54,6 +55,7 @@ e2eSuite('signInEmailCode', () => {
 
     if (!happyPath) {
       await page.goto(url, { waitUntil: 'networkidle' })
+      await waitForHydration(page)
       assert.ok(page.url().includes('/user/sign-in-finished'))
     }
   })

package/e2e/signInEmailLink.test.ts

@@ -1,10 +1,10 @@
-import test from 'node:test'
+import { e2eSuite, test } from './e2eSuite.js'
+import { waitForHydration } from '@live-change/e2e-test'
 import assert from 'node:assert'
 import App from '@live-change/framework'
 import randomProfile from 'random-profile-generator'
 import { withBrowser } from './withBrowser.js'
 import { useSecretLink } from './steps.js'
-import { e2eSuite } from './e2eSuite.js'
 
 const app = App.app()
 const randomUserData = randomProfile.profile()
@@ -25,6 +25,7 @@ e2eSuite('signInEmailLink', () => {
     await Email.create({ id: email, email, user })
 
     await page.goto(env.url + '/user/sign-in-email', { waitUntil: 'networkidle' })
+    await waitForHydration(page)
     await page.fill('input#email', email)
     await page.click('button[type=submit]')
     await page.waitForURL('**/sent/*', { timeout: 10000 })
@@ -38,7 +39,7 @@ e2eSuite('signInEmailLink', () => {
     assert.strictEqual((authenticationData as { messageData?: { user: string } })?.messageData?.user, user, 'authentication contains user')
 
     const linkData = await useSecretLink(page, env, authentication, happyPath)
-    await page.waitForURL('**/sign-in-finished', { timeout: 10000 })
+    await page.waitForURL('**/sign-in-finished', { timeout: 30000 })
 
     assert.ok(page.url().includes('/user/sign-in-finished'))
     const clientSession = await page.evaluate(
@@ -54,6 +55,7 @@ e2eSuite('signInEmailLink', () => {
 
     if (!happyPath) {
       await page.goto(env.url + '/user/link/' + linkData.secretCode, { waitUntil: 'networkidle' })
+      await waitForHydration(page)
       await page.getByText('Link used').waitFor({ state: 'visible' })
     }
   })