chore: Fix testing pages (#117)

just-boris · web-flow · commit 4aaed9e410b1 · 2024-10-31T20:41:20.000Z
diff --git a/test/fixtures/compare-test.html b/test/fixtures/compare-test.html
@@ -1,10 +1,8 @@
+<!DOCTYPE html>
 <html>
   <head>
     <meta charset="UTF-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
-    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Test page</title>
     <style>
diff --git a/test/fixtures/index.html b/test/fixtures/index.html
@@ -1,8 +1,8 @@
+<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport"
-        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Test page</title>
 </head>
diff --git a/test/fixtures/rounding-test.html b/test/fixtures/rounding-test.html
@@ -1,10 +1,8 @@
+<!DOCTYPE html>
 <html>
   <head>
     <meta charset="UTF-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
-    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Rounding test page</title>
     <style>
diff --git a/test/fixtures/test-full-page-screenshot.html b/test/fixtures/test-full-page-screenshot.html
@@ -41,9 +41,9 @@ <h1>Full Page Screenshot</h1>
 			} else {
 				gradient.classList.remove('three-pages');
 				gradient.classList.add('single-page');
-			}		
+			}
 		});
 	</script>
 </body>
 
-</html>
+</html>
diff --git a/test/fixtures/test-page-object.html b/test/fixtures/test-page-object.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -26,8 +27,8 @@
     <!--  <p id="not-existing">Does not exist</p>-->
     <p id="text-content">Some text</p>
     <p id="hidden" style="display: none">I am not visible</p>
-    <div id="scrollable-container" style="overflow: auto">
-      <div style="width: 120%">Some scrollable text</div>
+    <div id="scrollable-container" style="overflow: auto; max-height: 30px">
+      <div style="width: 120%; height: 100px">Some scrollable text</div>
     </div>
     <button id="button">Click me</button>
     <button id="update-live-announcement-button">Update live announcement</button>
diff --git a/test/page-object.test.ts b/test/page-object.test.ts
@@ -249,13 +249,13 @@ test(
 test(
   'scrollToBottom',
   setupTest(async page => {
-    const height = 250;
-    await page.setWindowSize({ width: 300, height });
-    const scrollHeight = (await page.getElementProperty('body', 'scrollHeight')) as number;
+    const testElement = '#scrollable-container';
+    const { height } = await page.getBoundingBox(testElement);
+    const scrollHeight = (await page.getElementProperty(testElement, 'scrollHeight')) as number;
 
-    await page.scrollToBottom('body');
+    await page.scrollToBottom(testElement);
 
-    const { top } = await page.getElementScroll('body');
+    const { top } = await page.getElementScroll(testElement);
     expect(top).toBeGreaterThanOrEqual(scrollHeight - height);
   })
 );
