test: write the test some other way to try to convince playwright

Princesseuh · Princesseuh · commit 8cbb65db63ff · 2024-01-03T18:19:12.000-05:00
diff --git 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
@@ -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();
 }
