Restore asynchronous Page rendering

Restore the asynchronous rendering by awaiting `nextAnimationFrame` from
within the `View.renderSnapshot` method instead of awaiting a
`nextEventLoopTick` from within the `PageRenderer.renderElement` method.

src/core/drive/page_renderer.ts

@@ -2,6 +2,7 @@ import { Renderer } from "../renderer"
 import { PageSnapshot } from "./page_snapshot"
 import { ReloadReason } from "../native/browser_adapter"
 import { activateScriptElement, waitForLoad, getBodyElementId } from "../../util"
+import { nextEventLoopTick } from "../../util"
 
 export class PageRenderer extends Renderer<HTMLBodyElement, PageSnapshot> {
   static renderElement(currentElement: HTMLBodyElement, newElement: HTMLBodyElement) {
@@ -38,6 +39,8 @@ export class PageRenderer extends Renderer<HTMLBodyElement, PageSnapshot> {
   }
 
   async render() {
+    await nextEventLoopTick()
+
     if (this.willRender) {
       this.replaceBody()
     }

src/tests/functional/drive_custom_body_tests.ts

@@ -1,21 +1,30 @@
 import { test } from "@playwright/test"
 import { assert } from "chai"
-import { nextBody, pathname } from "../helpers/page"
-
-const path = "/src/tests/fixtures/drive_custom_body.html"
+import { nextEventNamed, pathname } from "../helpers/page"
 
 test.beforeEach(async ({ page }) => {
-  await page.goto(path)
+  await page.goto("/src/tests/fixtures/drive_custom_body.html")
 })
 
 test("test drive with a custom body element", async ({ page }) => {
-  page.click("#drive")
-  await nextBody(page)
+  await page.click("#drive")
+  await nextEventNamed(page, "turbo:load")
+
+  assert.equal(pathname(page.url()), "/src/tests/fixtures/drive_custom_body_2.html")
+  assert.equal(await page.textContent("h1"), "Drive (with custom body)")
+  assert.equal(await page.textContent("#different-content"), "Drive 2")
+
+  await page.goBack()
+  await nextEventNamed(page, "turbo:load")
+
+  assert.equal(pathname(page.url()), "/src/tests/fixtures/drive_custom_body.html")
+  assert.equal(await page.textContent("h1"), "Drive (with custom body)")
+  assert.equal(await page.textContent("#different-content"), "Drive 1")
 
-  const h1 = await page.locator("h1")
-  const differentContent = await page.locator("#different-content")
+  await page.goForward()
+  await nextEventNamed(page, "turbo:load")
 
   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")
+  assert.equal(await page.textContent("h1"), "Drive (with custom body)")
+  assert.equal(await page.textContent("#different-content"), "Drive 2")
 })