diff --git a/src/tests/functional/autofocus_tests.js b/src/tests/functional/autofocus_tests.js
index 011562ceb..9cc49afe3 100644
--- a/src/tests/functional/autofocus_tests.js
+++ b/src/tests/functional/autofocus_tests.js
@@ -1,150 +1,65 @@
-import { test } from "@playwright/test"
-import { assert } from "chai"
-import { hasSelector, nextBeat } from "../helpers/page"
+import { expect, test } from "@playwright/test"
test.beforeEach(async ({ page }) => {
await page.goto("/src/tests/fixtures/autofocus.html")
})
test("autofocus first autofocus element on load", async ({ page }) => {
- await nextBeat()
- assert.ok(
- await hasSelector(page, "#first-autofocus-element:focus"),
- "focuses the first [autofocus] element on the page"
- )
- assert.notOk(
- await hasSelector(page, "#second-autofocus-element:focus"),
- "focuses the first [autofocus] element on the page"
- )
+ await expect(page.locator("#first-autofocus-element")).toBeFocused()
})
test("autofocus first [autofocus] element on visit", async ({ page }) => {
await page.goto("/src/tests/fixtures/navigation.html")
await page.click("#autofocus-link")
- await nextBeat()
-
- assert.ok(
- await hasSelector(page, "#first-autofocus-element:focus"),
- "focuses the first [autofocus] element on the page"
- )
- assert.notOk(
- await hasSelector(page, "#second-autofocus-element:focus"),
- "focuses the first [autofocus] element on the page"
- )
+ await expect(page.locator("#first-autofocus-element")).toBeFocused()
})
test("navigating a frame with a descendant link autofocuses [autofocus]:first-of-type", async ({ page }) => {
await page.click("#frame-inner-link")
- await nextBeat()
-
- assert.ok(
- await hasSelector(page, "#frames-form-first-autofocus-element:focus"),
- "focuses the first [autofocus] element in frame"
- )
- assert.notOk(
- await hasSelector(page, "#frames-form-second-autofocus-element:focus"),
- "focuses the first [autofocus] element in frame"
- )
+ await expect(page.locator("#frames-form-first-autofocus-element")).toBeFocused()
})
test("autofocus visible [autofocus] element on visit with inert elements", async ({ page }) => {
await page.click("#autofocus-inert-link")
- await nextBeat()
-
- assert.notOk(
- await hasSelector(page, "#dialog-autofocus-element:focus"),
- "autofocus element is ignored in a closed dialog"
- )
- assert.notOk(
- await hasSelector(page, "#details-autofocus-element:focus"),
- "autofocus element is ignored in a closed details"
- )
- assert.notOk(
- await hasSelector(page, "#hidden-autofocus-element:focus"),
- "autofocus element is ignored in a hidden div"
- )
- assert.notOk(
- await hasSelector(page, "#inert-autofocus-element:focus"),
- "autofocus element is ignored in an inert div"
- )
- assert.notOk(
- await hasSelector(page, "#disabled-autofocus-element:focus"),
- "autofocus element is ignored when disabled"
- )
- assert.ok(
- await hasSelector(page, "#visible-autofocus-element:focus"),
- "focuses the visible [autofocus] element on the page"
- )
+ await expect(page.locator("#visible-autofocus-element")).toBeFocused()
})
test("navigating a frame with a link targeting the frame autofocuses [autofocus]:first-of-type", async ({
page
}) => {
await page.click("#frame-outer-link")
- await nextBeat()
-
- assert.ok(
- await hasSelector(page, "#frames-form-first-autofocus-element:focus"),
- "focuses the first [autofocus] element in frame"
- )
- assert.notOk(
- await hasSelector(page, "#frames-form-second-autofocus-element:focus"),
- "focuses the first [autofocus] element in frame"
- )
+ await expect(page.locator("#frames-form-first-autofocus-element")).toBeFocused()
})
test("navigating a frame with a turbo-frame targeting the frame autofocuses [autofocus]:first-of-type", async ({
page
}) => {
await page.click("#drives-frame-target-link")
- await nextBeat()
-
- assert.ok(
- await hasSelector(page, "#frames-form-first-autofocus-element:focus"),
- "focuses the first [autofocus] element in frame"
- )
- assert.notOk(
- await hasSelector(page, "#frames-form-second-autofocus-element:focus"),
- "focuses the first [autofocus] element in frame"
- )
+ await expect(page.locator("#frames-form-first-autofocus-element")).toBeFocused()
})
test("receiving a Turbo Stream message with an [autofocus] element when the activeElement is the document", async ({ page }) => {
await page.evaluate(() => {
- if (document.activeElement instanceof HTMLElement) {
- document.activeElement.blur()
- }
+ document.activeElement.blur()
window.Turbo.renderStreamMessage(`
`)
})
- await nextBeat()
-
- assert.ok(
- await hasSelector(page, "#autofocus-from-stream:focus"),
- "focuses the [autofocus] element in from the turbo-stream"
- )
+ await expect(page.locator("#autofocus-from-stream")).toBeFocused()
})
test("autofocus from a Turbo Stream message does not leak a placeholder [id]", async ({ page }) => {
await page.evaluate(() => {
- if (document.activeElement instanceof HTMLElement) {
- document.activeElement.blur()
- }
+ document.activeElement.blur()
window.Turbo.renderStreamMessage(`
`)
})
- await nextBeat()
-
- assert.ok(
- await hasSelector(page, "#container-from-stream input:focus"),
- "focuses the [autofocus] element in from the turbo-stream"
- )
+ await expect(page.locator("#container-from-stream input")).toBeFocused()
})
test("receiving a Turbo Stream message with an [autofocus] element when an element within the document has focus", async ({ page }) => {
@@ -155,10 +70,5 @@ test("receiving a Turbo Stream message with an [autofocus] element when an eleme
`)
})
- await nextBeat()
-
- assert.ok(
- await hasSelector(page, "#first-autofocus-element:focus"),
- "focuses the first [autofocus] element on the page"
- )
+ await expect(page.locator("#first-autofocus-element")).toBeFocused()
})