diff --git a/src/core/drive/page_renderer.ts b/src/core/drive/page_renderer.ts index 0d320a033..b0ca7db21 100644 --- a/src/core/drive/page_renderer.ts +++ b/src/core/drive/page_renderer.ts @@ -1,6 +1,7 @@ import { Renderer } from "../renderer" import { PageSnapshot } from "./page_snapshot" import { ReloadReason } from "../native/browser_adapter" +import { nextEventLoopTick } from "../../util" export class PageRenderer extends Renderer { get shouldRender() { @@ -104,9 +105,14 @@ export class PageRenderer extends Renderer { } } - assignNewBody() { + async assignNewBody() { + await nextEventLoopTick() + if (document.body && this.newElement instanceof HTMLBodyElement) { - document.body.replaceWith(this.newElement) + const currentBody = this.findBodyElement(document.body) + const newBody = this.findBodyElement(this.newElement) + + currentBody.replaceWith(newBody) } else { document.documentElement.appendChild(this.newElement) } @@ -131,4 +137,12 @@ export class PageRenderer extends Renderer { get newBodyScriptElements() { return this.newElement.querySelectorAll("script") } + + // Private + + findBodyElement(body: HTMLBodyElement | HTMLElement) { + if (!this.currentSnapshot.bodyElementId) return body + + return body.querySelector(`#${this.currentSnapshot.bodyElementId}`) || body + } } diff --git a/src/core/drive/page_snapshot.ts b/src/core/drive/page_snapshot.ts index 9b5247fad..3052f36a9 100644 --- a/src/core/drive/page_snapshot.ts +++ b/src/core/drive/page_snapshot.ts @@ -52,6 +52,10 @@ export class PageSnapshot extends Snapshot { return this.getSetting("visit-control") != "reload" } + get bodyElementId() { + return this.getSetting("body") + } + // Private getSetting(name: string) { diff --git a/src/tests/fixtures/drive_custom_body.html b/src/tests/fixtures/drive_custom_body.html new file mode 100644 index 000000000..8f0a20929 --- /dev/null +++ b/src/tests/fixtures/drive_custom_body.html @@ -0,0 +1,21 @@ + + + + + + Drive (with custom body) + + + + +

Drive (with custom body)

+ +
+ + +

Drive 1

+
+ + diff --git a/src/tests/fixtures/drive_custom_body_2.html b/src/tests/fixtures/drive_custom_body_2.html new file mode 100644 index 000000000..81525a3af --- /dev/null +++ b/src/tests/fixtures/drive_custom_body_2.html @@ -0,0 +1,21 @@ + + + + + + Drive (with custom body) + + + + +

Drive (with custom body 2)

+ +
+ + +

Drive 2

+
+ + diff --git a/src/tests/functional/drive_custom_body_tests.ts b/src/tests/functional/drive_custom_body_tests.ts new file mode 100644 index 000000000..8f9e22267 --- /dev/null +++ b/src/tests/functional/drive_custom_body_tests.ts @@ -0,0 +1,21 @@ +import { test } from "@playwright/test" +import { assert } from "chai" +import { nextBody, pathname } from "../helpers/page" + +const path = "/src/tests/fixtures/drive_custom_body.html" + +test.beforeEach(async ({ page }) => { + await page.goto(path) +}) + +test("test drive with a custom body element", async ({ page }) => { + page.click("#drive") + await nextBody(page) + + const h1 = await page.locator("h1") + const differentContent = await page.locator("#different-content") + + assert.equal(pathname(page.url()), "/src/tests/fixtures/drive_custom_body_2.html") + assert.equal(await h1.textContent(), "Drive (with custom body)") + assert.equal(await differentContent.textContent(), "Drive 2") +})