From 8cbb65db63ff15bf678cd8f6bb4a722756ff88f0 Mon Sep 17 00:00:00 2001
From: Princesseuh <3019731+Princesseuh@users.noreply.github.com>
Date: Wed, 3 Jan 2024 18:19:12 -0500
Subject: [PATCH] test: write the test some other way to try to convince
 playwright

---
 packages/astro/e2e/custom-client-directives.test.js    |  3 +++
 .../custom-client-directives/client-options.js         | 10 +++++++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/astro/e2e/custom-client-directives.test.js b/packages/astro/e2e/custom-client-directives.test.js
index 443df43075c1..118a5d53f541 100644
--- a/packages/astro/e2e/custom-client-directives.test.js
+++ b/packages/astro/e2e/custom-client-directives.test.js
@@ -93,6 +93,9 @@ function testClientDirectivesShared() {
 	test('Client directives should be passed options correctly', async ({ astro, page }) => {
 		await page.goto(astro.resolveUrl('/'));
 
+		const optionsContent = page.locator('#client-has-options pre');
+		await waitForHydrate(page, optionsContent);
+
 		const clientOptions = page.locator('#options');
 		await expect(clientOptions).toHaveText(
 			'Passed options are: {"message":"Hello! I was passed as an option"}'
diff --git a/packages/astro/e2e/fixtures/custom-client-directives/client-options.js b/packages/astro/e2e/fixtures/custom-client-directives/client-options.js
index 8a1a4741e0d6..70320cf8182c 100644
--- a/packages/astro/e2e/fixtures/custom-client-directives/client-options.js
+++ b/packages/astro/e2e/fixtures/custom-client-directives/client-options.js
@@ -1,6 +1,10 @@
 // Hydrate directly and write the passed options to the DOM
 export default async (load, options) => {
-		const hydrate = await load()
-		document.write(`<div id="options">Passed options are: ${JSON.stringify(options.value)}</div>`)
-    await hydrate()
+	const hydrate = await load();
+
+	const div = document.createElement('div');
+	div.id = 'options';
+	div.textContent = `Passed options are: ${JSON.stringify(options.value)}`;
+	document.body.appendChild(div);
+	await hydrate();
 }