add isSelectorInViewport and isSelectorEntirelyInViewport tests; refactor their implementations to use Playwright

Author: ingvar-snow

autotests/pageObjects/pages/Search.ts

@@ -1,4 +1,5 @@
 import {MobilePage} from 'autotests/pageObjects';
+import {Input} from 'autotests/pageObjects/components';
 import {Search as SearchRoute} from 'autotests/routes/pageRoutes';
 import {setReadonlyProperty} from 'e2ed/utils';
 
@@ -16,6 +17,8 @@ export class Search extends MobilePage<CustomPageParams> {
    */
   readonly mobileDevice = 'iphone' as const;
 
+  readonly searchInput: Input = new Input('q');
+
   /**
    * The search query of the page.
    */

autotests/tests/main/viewport.ts

@@ -0,0 +1,68 @@
+import {test} from 'autotests';
+import {Search} from 'autotests/pageObjects/pages';
+import {expect} from 'e2ed';
+import {navigateToPage, scroll} from 'e2ed/actions';
+import {isSelectorEntirelyInViewport, isSelectorInViewport} from 'e2ed/utils';
+
+test(
+  'isSelectorInViewport, isSelectorEntirelyInViewport and expect().toBeInViewport',
+  {meta: {testId: '24'}, testIdleTimeout: 12_000, testTimeout: 20_000},
+  async () => {
+    const scrollValueForPartialInViewport = 50;
+    const scrollValueForNotInViewport = 500;
+
+    const searchQuery = 'foo';
+    const searchPage = await navigateToPage(Search, {searchQuery});
+
+    const searchInputSelector = searchPage.searchInput.input;
+
+    await expect(
+      await isSelectorInViewport(searchInputSelector),
+      'isSelectorInViewport: searchInput is in viewport after page load',
+    ).ok();
+
+    await expect(
+      await isSelectorEntirelyInViewport(searchInputSelector),
+      'isSelectorEntirelyInViewport: searchInput is entirely in viewport after page load',
+    ).ok();
+
+    await expect(
+      searchInputSelector,
+      'toBeInViewport: searchInput is in viewport after page load',
+    ).toBeInViewport();
+
+    await expect(
+      searchInputSelector,
+      'toBeInViewport with ratio 1: searchInput is entirely in viewport after page load',
+    ).toBeInViewport({ratio: 1});
+
+    await scroll(0, scrollValueForPartialInViewport);
+
+    await expect(
+      await isSelectorInViewport(searchInputSelector),
+      'isSelectorInViewport: searchInput is in viewport after smaill scroll',
+    ).ok();
+
+    await expect(
+      await isSelectorEntirelyInViewport(searchInputSelector),
+      'isSelectorEntirelyInViewport: searchInput is not entirely in viewport after small scroll',
+    ).notOk();
+
+    await expect(
+      searchInputSelector,
+      'toBeInViewport with ratio 0.1: searchInput is not entirely in viewport after small scroll',
+    ).toBeInViewport({ratio: 0.1});
+
+    await scroll(0, scrollValueForNotInViewport);
+
+    await expect(
+      await isSelectorInViewport(searchInputSelector),
+      'isSelectorInViewport: searchInput is not in viewport after big scroll',
+    ).notOk();
+
+    await expect(
+      await isSelectorEntirelyInViewport(searchInputSelector),
+      'isSelectorEntirelyInViewport: searchInput is not entirely in viewport after big scroll',
+    ).notOk();
+  },
+);

bin/makeExecutable.sh

@@ -4,6 +4,6 @@ IFS=$'\n\t'
 
 files=("$@")
 
-for file in ${files[*]}; do
-    sed -i '' '1s|^|#!/usr/bin/env node\'$'\n''\'$'\n''|' "$file" && chmod +x "$file"
+for file in "${files[@]}"; do
+    printf '#!/usr/bin/env node\n\n' | cat - "$file" > "$file.tmp" && mv "$file.tmp" "$file" && chmod +x "$file"
 done

src/utils/document/getDocumentUrl.ts

@@ -13,13 +13,9 @@ let clientGetDocumentUrl: ClientFunction<[], Url> | undefined;
  */
 export const getDocumentUrl = async (): Promise<Url> => {
   if (clientGetDocumentUrl === undefined) {
-    clientGetDocumentUrl = createClientFunction<[], Url>(
-      () => document.URL as Url,
-      {
-        name: 'getDocumentUrl',
-        retries: 3,
-      },
-    );
+    clientGetDocumentUrl = createClientFunction<[], Url>(() => document.URL as Url, {
+      name: 'getDocumentUrl',
+    });
   }
 
   const url = await clientGetDocumentUrl();

src/utils/viewport/isSelectorEntirelyInViewport.ts

@@ -1,15 +1,20 @@
 import type {Selector} from '../../types/internal';
 
+import {expect as playwrightExpect} from '@playwright/test';
+
 /**
  * Returns `true`, if the selector is entirely in the viewport
  * (all selector points are in the viewport), and `false` otherwise.
  */
 export const isSelectorEntirelyInViewport = async (selector: Selector): Promise<boolean> => {
-  const htmlElementSelector = selector.createSelector('html');
-
-  const {height: clientHeight, width: clientWidth} = await htmlElementSelector.boundingClientRect;
-
-  const {bottom, left, right, top} = await selector.boundingClientRect;
+  try {
+    await playwrightExpect(selector.getPlaywrightLocator()).toBeInViewport({
+      ratio: 1,
+      timeout: 1,
+    });
 
-  return top >= 0 && bottom <= clientHeight && left >= 0 && right <= clientWidth;
+    return true;
+  } catch {
+    return false;
+  }
 };

src/utils/viewport/isSelectorInViewport.ts

@@ -1,15 +1,17 @@
 import type {Selector} from '../../types/internal';
 
+import {expect as playwrightExpect} from '@playwright/test';
+
 /**
  * Returns `true`, if the selector is in the viewport
  * (intersects with the viewport at least in one point), and `false` otherwise.
  */
 export const isSelectorInViewport = async (selector: Selector): Promise<boolean> => {
-  const htmlElementSelector = selector.createSelector('html');
-
-  const {height: clientHeight, width: clientWidth} = await htmlElementSelector.boundingClientRect;
-
-  const {bottom, left, right, top} = await selector.boundingClientRect;
+  try {
+    await playwrightExpect(selector.getPlaywrightLocator()).toBeInViewport({timeout: 1});
 
-  return top < clientHeight && bottom > 0 && left < clientWidth && right > 0;
+    return true;
+  } catch {
+    return false;
+  }
 };