Fix failing playwright test

Author: Rik Roots

dotcom-rendering/playwright/lib/iframe.ts

@@ -10,4 +10,16 @@ const getIframeBody = async (
 	return iframeBodyLocator;
 };
 
-export { getIframeBody };
+const getIframePart = async (
+	page: Page,
+	iframeSelector: string,
+	partSelector: string,
+): Promise<Locator> => {
+	const iframePartLocator = page
+		.frameLocator(iframeSelector)
+		.locator(partSelector);
+	await expect(iframePartLocator).toBeAttached({ timeout: 10_000 });
+	return iframePartLocator;
+};
+
+export { getIframeBody, getIframePart };

dotcom-rendering/playwright/tests/article.embeds.e2e.spec.ts

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test';
 import { cmpAcceptAll } from '../lib/cmp';
-import { getIframeBody } from '../lib/iframe';
+import { getIframeBody, getIframePart } from '../lib/iframe';
 import { waitForIsland } from '../lib/islands';
 import { loadPage } from '../lib/load-page';
 import { expectToBeVisible } from '../lib/locators';
@@ -43,9 +43,10 @@ test.describe('Embeds', () => {
 
 			await waitForIsland(page, 'InteractiveBlockComponent');
 			await expect(
-				await getIframeBody(
+				await getIframePart(
 					page,
 					'[data-testid="interactive-element-LA%20Rams%20dead%20cap%20numbers"] > iframe',
+					'.title',
 				),
 			).toContainText('The Rams’ dead cap numbers for 2020');
 		});

dotcom-rendering/src/components/InteractiveBlockComponent.importable.tsx

@@ -365,7 +365,6 @@ export const InteractiveBlockComponent = ({
 		if (url && scriptUrlIsBoot && placeholderLinkRef.current) {
 			// Prepare for graphic url dynamic updates
 			const graphicUrl = new URL(url);
-			const graphicUrlParams = new URLSearchParams(graphicUrl.search);
 
 			// Begin creating new iframe element
 			const iframe = document.createElement('iframe');
@@ -383,19 +382,22 @@ export const InteractiveBlockComponent = ({
 			if (isRunningInWebEnvironment && !requiresDarkMode) {
 				if (isDatawrapperGraphic || isUploaderEmbedPath) {
 					// Add the 'dark=false' search param
-					graphicUrlParams.set('dark', 'false');
+					if (graphicUrl.search.length) {
+						graphicUrl.search += '&dark=false';
+					} else {
+						graphicUrl.search += '?dark=false';
+					}
 				}
 			}
 
 			// Always serve graphic over https, not http
 			graphicUrl.protocol = 'https:';
 
-			graphicUrl.search = graphicUrlParams.toString();
-
 			// Finalise new iframe element
 			iframe.src = graphicUrl.href;
 
 			setupWindowListeners(iframe);
+
 			wrapperRef.current?.prepend(iframe);
 
 			setLoaded(true);
@@ -420,6 +422,7 @@ export const InteractiveBlockComponent = ({
 					}
 				},
 			);
+
 			setLoaded(true);
 		}
 	}, [loaded]);