Add test ID for modal background and content. Switch test to use testid instead of CSS Module classname.

Author: thekevinbrown

src/packages/admin-ui-components/src/modal/component.tsx

@@ -69,12 +69,16 @@ export const Modal = ({
 	return (
 		<>
 			{isOpen && (
-				<div ref={overlayRef} className={clsx(overlay ? styles.overlay : styles.noOverlay)}>
+				<div
+					ref={overlayRef}
+					className={clsx(overlay ? styles.overlay : styles.noOverlay)}
+					data-testid="modal-background"
+				>
 					<div
 						ref={modalRef}
 						className={clsx(className || [styles.wrapper, fullScreen && styles.fullScreen])}
 					>
-						<div className={styles.content}>
+						<div className={styles.content} data-testid="modal-content">
 							{title && (
 								<div className={styles.headerWrapper}>
 									<div className={styles.header}>

src/packages/end-to-end/src/__tests__/ui/rest/basic-functionality.test.ts

@@ -24,7 +24,7 @@ test('Ensure vehicles can be listed and that they have pilots', async ({ page })
 	await expect(page.getByTestId('detail-panel-field-pilots')).toContainText(
 		'pilots*Luke SkywalkerWedge Antilles'
 	);
-	await page.locator('._overlay_1slpl_1').click();
+	await page.getByTestId('modal-background').click();
 	await page.getByRole('cell', { name: 'AT-ST' }).click();
 	await expect(page.getByTestId('detail-panel-field-pilots')).toContainText('pilots*Chewbacca');
 });