fix: text content progression

src/common/progress.ts

@@ -1,8 +1,6 @@
 import type { Page } from '@playwright/test';
 import type { ModifiedField } from '../types/ModifiableField';
 
-import { replaceLast } from './utils/replaceLast';
-
 export const progress = async (page: Page, selector: string) =>
 	page.evaluate((selector) => {
 		const element = document.querySelector(selector);
@@ -31,7 +29,7 @@ export const progress = async (page: Page, selector: string) =>
 					return;
 				}
 
-				const newTextContent = replaceLast(textContent, annotation, '');
+				const newTextContent = window.replaceLast(textContent, annotation, '');
 
 				element.textContent = newTextContent;
 
@@ -47,8 +45,7 @@ export const progress = async (page: Page, selector: string) =>
 					return;
 				}
 
-				const lastAnnotationIndex = attributeValue.lastIndexOf(annotation);
-				const newValue = attributeValue.slice(0, lastAnnotationIndex);
+				const newValue = window.replaceLast(attributeValue, annotation, '');
 
 				element.setAttribute(attribute, newValue);
 

src/common/setup.ts

@@ -1,42 +1,24 @@
 import type { Page } from 'playwright';
+import { isElementVisible } from './utils/isElementVisible';
+import { replaceLast } from './utils/replaceLast';
 
 declare global {
 	interface Window {
 		isElementVisible: (element: Element) => boolean;
+		replaceLast: (text: string, search: string, replacement: string) => string;
 	}
 }
 export const setup = async (page: Page) => {
-	await page.addInitScript(() => {
-		window.isElementVisible = (element: Element) => {
-			if (!element.checkVisibility()) {
-				return false;
-			}
-
-			const { x, y, height, width } = element.getBoundingClientRect();
-			const { innerWidth, innerHeight, scrollX, scrollY } = window;
-
-			const elementTop = y + scrollY;
-			const elementBottom = elementTop + height;
-			const elementLeft = x + scrollX;
-			const elementRight = elementLeft + width;
-
-			const viewportTop = scrollY;
-			const viewportBottom = innerHeight + scrollY;
-			const viewportLeft = scrollX;
-			const viewportRight = innerWidth + scrollX;
-
-			const topVisible =
-				elementTop >= viewportTop && elementTop <= viewportBottom;
-			const bottomVisible =
-				elementBottom >= viewportTop && elementBottom <= viewportBottom;
-			const leftVisible =
-				elementLeft >= viewportLeft && elementLeft <= viewportRight;
-			const rightVisible =
-				elementRight >= viewportLeft && elementRight <= viewportRight;
-
-			return topVisible || bottomVisible || leftVisible || rightVisible;
-		};
-	});
+	await page.addInitScript(
+		({ isElementVisible, replaceLast }) => {
+			window.isElementVisible = isElementVisible;
+			window.replaceLast = replaceLast;
+		},
+		{
+			isElementVisible,
+			replaceLast,
+		},
+	);
 
 	await page.reload();
 };

src/common/utils/isElementVisible.ts

@@ -0,0 +1,28 @@
+export const isElementVisible = (element: Element) => {
+	if (!element.checkVisibility()) {
+		return false;
+	}
+
+	const { x, y, height, width } = element.getBoundingClientRect();
+	const { innerWidth, innerHeight, scrollX, scrollY } = window;
+
+	const elementTop = y + scrollY;
+	const elementBottom = elementTop + height;
+	const elementLeft = x + scrollX;
+	const elementRight = elementLeft + width;
+
+	const viewportTop = scrollY;
+	const viewportBottom = innerHeight + scrollY;
+	const viewportLeft = scrollX;
+	const viewportRight = innerWidth + scrollX;
+
+	const topVisible = elementTop >= viewportTop && elementTop <= viewportBottom;
+	const bottomVisible =
+		elementBottom >= viewportTop && elementBottom <= viewportBottom;
+	const leftVisible =
+		elementLeft >= viewportLeft && elementLeft <= viewportRight;
+	const rightVisible =
+		elementRight >= viewportLeft && elementRight <= viewportRight;
+
+	return topVisible || bottomVisible || leftVisible || rightVisible;
+};