How to use getActiveElementDeep method in Playwright Internal

Best JavaScript code snippet using playwright-internal

Run Playwright Internal automation tests on LambdaTest cloud grid

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

ReactInputSelection.js

Source: ReactInputSelection.js Github

copy
1import { TEXT_NODE, ELEMENT_NODE } from '../../../HTMLNodeType';
2
3import { getActiveElement } from './getActiveElement';
4import { getOffsets, setOffsets } from './ReactDOMSelection';
5
6const isSameOriginFrame = (iframe) => {
7  try {
8    return typeof iframe.contentWindow.location.href === 'string';
9  } catch (err) {
10    return false;
11  }
12};
13
14const getActiveElementDeep = () => {
15  let win = window;
16  let element = getActiveElement();
17  while (element instanceof win.HTMLIFrameElement) {
18    if (isSameOriginFrame(element)) {
19      win = element.contentWindow;
20    } else {
21      return element;
22    }
23    element = getActiveElement(win.document);
24  }
25  return element;
26};
27
28const hasSelectionCapabilities = (elem) => {
29  const nodeName = elem && elem.nodeName && elem.nodeName.toLowerCase();
30  return (
31    nodeName &&
32    ((nodeName === 'input' &&
33      (elem.type === 'text' ||
34        elem.type === 'search' ||
35        elem.type === 'tel' ||
36        elem.type === 'url' ||
37        elem.type === 'password')) ||
38      nodeName === 'textarea' ||
39      elem.contentEditable === 'true')
40  );
41};
42
43const getSelection = (input) => {
44  let selection;
45
46  if ('selectionStart' in input) {
47    selection = {
48      start: input.selectionStart,
49      end: input.selectionEnd,
50    };
51  } else {
52    selection = getOffsets(input);
53  }
54
55  return selection || { start: 0, end: 0 };
56};
57
58const getSelectionInformation = () => {
59  const focusedElem = getActiveElementDeep();
60  return {
61    focusedElem: focusedElem,
62    selectionRange: hasSelectionCapabilities(focusedElem)
63      ? getSelection(focusedElem)
64      : null,
65  };
66};
67
68const isTextNode = (node) => {
69  return node && node.nodeType === TEXT_NODE;
70};
71
72const containsNode = (outerNode, innerNode) => {
73  if (!outerNode || !innerNode) {
74    return false;
75  } else if (outerNode === innerNode) {
76    return true;
77  } else if (isTextNode(outerNode)) {
78    return false;
79  } else if (isTextNode(innerNode)) {
80    return containsNode(outerNode, innerNode.parentNode);
81  } else if ('contains' in outerNode) {
82    return outerNode.contains(innerNode);
83  } else if (outerNode.compareDocumentPosition) {
84    return !!(outerNode.compareDocumentPosition(innerNode) & 16);
85  } else {
86    return false;
87  }
88};
89
90const isInDocument = (node) => {
91  return (
92    node &&
93    node.ownerDocument &&
94    containsNode(node.ownerDocument.documentElement, node)
95  );
96};
97
98const setSelection = (input, offsets) => {
99  const start = offsets.start;
100  let end = offsets.end;
101  if (end === undefined) {
102    end = start;
103  }
104
105  if ('selectionStart' in input) {
106    input.selectionStart = start;
107    input.selectionEnd = Math.min(end, input.value.length);
108  } else {
109    setOffsets(input, offsets);
110  }
111};
112
113const restoreSelection = (priorSelectionInformation) => {
114  const curFocusedElem = getActiveElementDeep();
115  const priorFocusedElem = priorSelectionInformation.focusedElem;
116  const priorSelectionRange = priorSelectionInformation.selectionRange;
117  if (curFocusedElem !== priorFocusedElem && isInDocument(priorFocusedElem)) {
118    if (
119      priorSelectionRange !== null &&
120      hasSelectionCapabilities(priorFocusedElem)
121    ) {
122      setSelection(priorFocusedElem, priorSelectionRange);
123    }
124
125    const ancestors = [];
126    let ancestor = priorFocusedElem;
127    while ((ancestor = ancestor.parentNode)) {
128      if (ancestor.nodeType === ELEMENT_NODE) {
129        ancestors.push({
130          element: ancestor,
131          left: ancestor.scrollLeft,
132          top: ancestor.scrollTop,
133        });
134      }
135    }
136
137    if (typeof priorFocusedElem.focus === 'function') {
138      priorFocusedElem.focus();
139    }
140
141    for (let i = 0; i < ancestors.length; i++) {
142      const info = ancestors[i];
143      info.element.scrollLeft = info.left;
144      info.element.scrollTop = info.top;
145    }
146  }
147};
148
149export {
150  getSelectionInformation,
151  hasSelectionCapabilities,
152  getSelection,
153  restoreSelection,
154};
155
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 Playwright Internal 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)