How to use isTopMostWindow method in Cypress

Best JavaScript code snippet using cypress

Run Cypress automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

top-same-origin-window.js

Source: top-same-origin-window.js Github

copy
1/**
2 * Created by arantos on 2/02/2016.
3 *
4 * Utility functions for identifying the top-most JIRA window within the origin boundary.
5 * Some scripts were requiring the top window, which (in some cases) was causing cross-origin violation exceptions.
6 * For example the jira-issue-collector was designed to run inside an iframe at websites that were different origin
7 * from where JIRA is hosted. That caused cross-origin violation during the rendering of the iframe.
8 * @module jira/util/topSameOriginWndow
9 */
10define('jira/util/top-same-origin-window', function () {
11    'use strict';
12
13    return function (parentOf) {
14
15        function satisfiesSameOrigin(w) {
16            try {
17                // Accessing location.href from a window on another origin will throw an exception.
18                // eslint-disable-next-line eqeqeq
19                if (w.location.href == undefined) {
20                    return false;
21                }
22            } catch (e) {
23                return false;
24            }
25            return true;
26        }
27
28        function isTopMostWindow(w) {
29            return w === w.parent;
30        }
31
32        while (!isTopMostWindow(parentOf) && satisfiesSameOrigin(parentOf.parent)) {
33            parentOf = parentOf.parent;
34        }
35        return parentOf;
36    };
37});
Full Screen

content.js

Source: content.js Github

copy
1const iframeClickAction = "iframeClick";
2
3const isTopMostWindow = () => window.self === window.top;
4
5const sendClickToBackground = (e) => {
6  chrome.runtime.sendMessage({
7    type: "contentClickAction",
8    payload: {
9      coords: {
10        x: e.clientX,
11        y: e.clientY,
12      },
13      devicePixelRatio: window.devicePixelRatio, // can be re-trieved on background size?
14    },
15  });
16};
17
18const sendMessageToParentWindow = (targetWindow, event) => {
19  targetWindow.postMessage(
20    JSON.stringify({
21      type: iframeClickAction,
22      payload: {
23        event: {
24          clientX: event.clientX,
25          clientY: event.clientY,
26        },
27      },
28    }),
29    "*"
30  );
31};
32
33// chrome.runtime.sendMessage("contentMounted");
34document.addEventListener(
35  "click",
36  function (e) {
37    if (isTopMostWindow()) {
38      // topmost window
39      sendClickToBackground({
40        clientX: e.clientX,
41        clientY: e.clientY,
42      });
43    } else {
44      // embedded window
45      try {
46        sendMessageToParentWindow(e.target.ownerDocument.defaultView.parent, {
47          clientX: e.clientX,
48          clientY: e.clientY,
49        });
50      } catch (error) {
51        console.error(error);
52      }
53    }
54  },
55  true
56);
57
58window.addEventListener("message", function (messageEvent) {
59  // TODO: check all frames to find which one sent message
60  console.log(messageEvent);
61
62  try {
63    const { type, payload } = JSON.parse(messageEvent.data);
64
65    if (typeof type === "string" && type === iframeClickAction) {
66      const frameOffset = {
67        x: 0,
68        y: 0,
69      };
70
71      // Find message source iframe
72      const currentWindowIframes = document.getElementsByTagName("IFRAME");
73      for (let i = 0; i < currentWindowIframes.length; i++) {
74        const iframe = currentWindowIframes[i];
75
76        // Cross-browser way to get iframe's window object
77        const frameWindow =
78          iframe.contentWindow || iframe.contentDocument.defaultView;
79
80        // Comparison
81        if (messageEvent.source === frameWindow) {
82          // get relative offset
83          const iframeRect = iframe.getBoundingClientRect();
84          frameOffset.x = Math.max(0, iframeRect.x);
85          frameOffset.y = Math.max(0, iframeRect.y);
86        }
87      }
88
89      // calculate iframe sender offset
90      const { event } = payload;
91      const nextEvent = {
92        clientX: Number(event.clientX) + frameOffset.x,
93        clientY: Number(event.clientY) + frameOffset.y,
94      };
95
96      if (isTopMostWindow()) {
97        sendClickToBackground(nextEvent);
98      } else {
99        sendMessageToParentWindow(window.parent, nextEvent);
100      }
101    }
102  } catch (error) {
103    console.error(error);
104  }
105});
106
Full Screen

Accelerate Your Automation Test Cycles With LambdaTest

Leverage LambdaTest’s cloud-based platform to execute your automation tests in parallel and trim down your test execution time significantly. Your first 100 automation testing minutes are on us.

Try LambdaTest

Run JavaScript Tests on LambdaTest Cloud Grid

Execute automation tests with Cypress on a cloud-based Grid of 3000+ real browsers and operating systems for both web and mobile applications.

Test now for Free
LambdaTestX

We use cookies to give you the best experience. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. Learn More in our Cookies policy, Privacy & Terms of service

Allow Cookie
Sarah

I hope you find the best code examples for your project.

If you want to accelerate automated browser testing, try LambdaTest. Your first 100 automation testing minutes are FREE.

Sarah Elson (Product & Growth Lead)