summaryrefslogtreecommitdiffstats
path: root/devtools/shared/commands/inspector/tests/browser_inspector_command_findNodeFrontFromSelectors.js
blob: 7991421c8d7a1403a24f8df4bcc2a3faef6e3b09 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
/* Any copyright is dedicated to the Public Domain.
 http://creativecommons.org/publicdomain/zero/1.0/ */

"use strict";

add_task(async () => {
  // Build a simple test page with a remote iframe, using two distinct origins .com and .org
  const iframeOrgHtml = encodeURIComponent(
    `<h2 id="in-iframe">in org - same origin</h2>`
  );
  const iframeComHtml = encodeURIComponent(`<h3>in com - remote</h3>`);
  const html = encodeURIComponent(
    `<main class="foo bar">
       <button id="child">Click</button>
     </main>
     <!-- adding delay to both iframe so we can check we handle loading document has expected -->
     <iframe id="iframe-org" src="https://example.org/document-builder.sjs?delay=3000&html=${iframeOrgHtml}"></iframe>
     <iframe id="iframe-com" src="https://example.com/document-builder.sjs?delay=6000&html=${iframeComHtml}"></iframe>`
  );
  const tab = await addTab(
    "https://example.org/document-builder.sjs?html=" + html,
    { waitForLoad: false }
  );

  const commands = await CommandsFactory.forTab(tab);
  await commands.targetCommand.startListening();

  info("Check that it returns null when no params are passed");
  let nodeFront = await commands.inspectorCommand.findNodeFrontFromSelectors();
  is(
    nodeFront,
    null,
    `findNodeFrontFromSelectors returns null when no param is passed`
  );

  info("Check that it returns null when a string is passed");
  nodeFront = await commands.inspectorCommand.findNodeFrontFromSelectors(
    "body main"
  );
  is(
    nodeFront,
    null,
    `findNodeFrontFromSelectors returns null when passed a string`
  );

  info("Check it returns null when an empty array is passed");
  nodeFront = await commands.inspectorCommand.findNodeFrontFromSelectors([]);
  is(
    nodeFront,
    null,
    `findNodeFrontFromSelectors returns null when passed an empty array`
  );

  info("Check that passing a selector for a non-matching element returns null");
  nodeFront = await commands.inspectorCommand.findNodeFrontFromSelectors([
    "h1",
  ]);
  is(
    nodeFront,
    null,
    "findNodeFrontFromSelectors returns null as there's no <h1> element in the page"
  );

  info("Check passing a selector for an element in the top document");
  nodeFront = await commands.inspectorCommand.findNodeFrontFromSelectors([
    "button",
  ]);
  is(
    nodeFront.typeName,
    "domnode",
    "findNodeFrontFromSelectors returns a nodeFront"
  );
  is(
    nodeFront.displayName,
    "button",
    "findNodeFrontFromSelectors returned the appropriate nodeFront"
  );

  info("Check passing a selector for an element in a same origin iframe");
  nodeFront = await commands.inspectorCommand.findNodeFrontFromSelectors([
    "#iframe-org",
    "#in-iframe",
  ]);
  is(
    nodeFront.displayName,
    "h2",
    "findNodeFrontFromSelectors returned the appropriate nodeFront"
  );

  info("Check passing a selector for an element in a cross origin iframe");
  nodeFront = await commands.inspectorCommand.findNodeFrontFromSelectors([
    "#iframe-com",
    "h3",
  ]);
  is(
    nodeFront.displayName,
    "h3",
    "findNodeFrontFromSelectors returned the appropriate nodeFront"
  );

  info(
    "Check passing a selector for an non-existing element in an existing iframe"
  );
  nodeFront = await commands.inspectorCommand.findNodeFrontFromSelectors([
    "iframe",
    "#non-existant-id",
  ]);
  is(
    nodeFront.displayName,
    "#document",
    "findNodeFrontFromSelectors returned the last matching iframe document if the children selector isn't found"
  );
  is(
    nodeFront.parentNode().displayName,
    "iframe",
    "findNodeFrontFromSelectors returned the last matching iframe document if the children selector isn't found"
  );

  info("Check that timeout does work");
  // Reload the page so we'll have the iframe loading (for 3s) and we can check that
  // putting a smaller timeout will result in the function returning null.
  // we need to wait until it's fully processed to avoid pending promises.
  const onNewTargetProcessed = commands.targetCommand.once(
    "processed-available-target"
  );
  await reloadBrowser({ waitForLoad: false });
  await onNewTargetProcessed;
  nodeFront = await commands.inspectorCommand.findNodeFrontFromSelectors(
    ["#iframe-org", "#in-iframe"],
    // timeout in ms (smaller than 3s)
    100
  );
  is(
    nodeFront,
    null,
    "findNodeFrontFromSelectors timed out and returned null, as expected"
  );

  await commands.destroy();
});