Skip to content

fix(webdriverio): fix iframe switch not working in some commands#13721

Closed
NearHuscarl wants to merge 1 commit intowebdriverio:mainfrom
NearHuscarl:cb-iframe-switch
Closed

fix(webdriverio): fix iframe switch not working in some commands#13721
NearHuscarl wants to merge 1 commit intowebdriverio:mainfrom
NearHuscarl:cb-iframe-switch

Conversation

@NearHuscarl
Copy link

Proposed changes

Fix #13218, #13384
Note: the tests for the fix are kinda awkward as I don't think I have access to the guinea-pig.webdriver.io domain.
Related PR: #13659

Types of changes

  • Polish (an improvement for an existing feature)
  • Bugfix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation update (improvements to the project's docs)
  • Specification changes (updates to WebDriver command specifications)
  • Internal updates (everything related to internal scripts, governance documentation and CI files)

Checklist

  • I have read the CONTRIBUTING doc
  • I have added tests that prove my fix is effective or that my feature works
  • I have added the necessary documentation (if appropriate)
  • I have added proper type definitions for new commands (if appropriate)

Backport Request

//: # (The current main branch is the development branch for WebdriverIO v9. If your change should be released to the current major version of WebdriverIO (v8), please raise another PR with the same changes against the v8 branch.)

  • This change is solely for v9 and doesn't need to be back-ported
  • Back-ported PR at #XXXXX

Further comments

Reviewers: @webdriverio/project-committers

@linux-foundation-easycla
Copy link

CLA Not Signed

await browser.switchToFrame(iframe)
}
async function setAttribute(selector: string, attributeName: string, attributeValue: string) {
await browser.execute((elementSelector, attributeName, attributeValue) => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would be easier to used elem.execute here so you already have the element reference as in v9 the execute method also exists on the Element object

@erwinheitzman
Copy link
Member

Hi @NearHuscarl thank you for looking into these issues and providing a PR. Could you sign the CLA please? 🙂

Copy link
Member

@christian-bromann christian-bromann left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think this goes into the right direction as it patches the current flaw of WebdriverIO of not being able to control into which frame the user is moving. I have a different proposal here: #13728

@NearHuscarl
Copy link
Author

@christian-bromann Unfortunately it doesn't work for my case, I have 2 different iframes where the contents are set via srcdoc attribute, and I cannot target the correct iframe because the url is always going to be about:srcdoc:

<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>Hello there!</h1>
    <iframe
      id="my-iframe"
      srcdoc=""
      style="border: none; width: 100%; height: 100%"
    ></iframe>
    <iframe
      id="my-iframe-2"
      srcdoc=""
      style="border: none; width: 100%; height: 100%"
    ></iframe>
    <script>
      window.onload = () => {
        const setFrameContent = (iframeId, htmlContent) => {
          const iframe = document.getElementById(iframeId);
          iframe.srcdoc = htmlContent;
        };

        setFrameContent(
          'my-iframe',
          `
          <html>
            <head>
              <meta charset="UTF-8" />
            </head>
            <body>
              <h2>Hello from iframe</h2>
            </body>
          </html>
        `
        );
        setFrameContent(
          'my-iframe-2',
          `
          <html>
            <head>
              <meta charset="UTF-8" />
            </head>
            <body>
              <h2>Hello from iframe 2</h2>
            </body>
          </html>
        `
        );
      };
    </script>
  </body>
</html>
const tree = await browser.browsingContextGetTree({ maxDepth: 10 });
console.log(JSON.stringify(tree, null, 2));
[0-0] {
[0-0]   "contexts": [
[0-0]     {
[0-0]       "children": [
[0-0]         {
[0-0]           "children": [],
[0-0]           "context": "6407616B7B5C1B11A40820D2A3A0686F",
[0-0]           "url": "about:srcdoc",
[0-0]           "userContext": "default"
[0-0]         },
[0-0]         {
[0-0]           "children": [],
[0-0]           "context": "0548A02FDE1B433325658E9B89958127",
[0-0]           "url": "about:srcdoc",
[0-0]           "userContext": "default"
[0-0]         }
[0-0]       ],
[0-0]       "context": "2A4372C4BBE0039D939DFA4FD43A07F8",
[0-0]       "parent": null,
[0-0]       "url": "http://localhost:3001/",
[0-0]       "userContext": "default"
[0-0]     }
[0-0]   ]
[0-0] }

@christian-bromann
Copy link
Member

Unfortunately it doesn't work for my case, I have 2 different iframes where the contents are set via srcdoc attribute, and I cannot target the correct iframe because the url is always going to be about:srcdoc:

I have refined the implementation to support this use case. I will introduce a new command called switchFrame that allows you to provide a callback that help selecting the right frame, e.g. by checking whether a certain element exists. Here is an example for its usage:

    await browser.url('https://the-internet.herokuapp.com/nested_frames')
    await browser.switchFrame(() => browser.$('aria/MIDDLE').isExisting())
    console.log((await browser.$('body').getHTML()).trim())
    await browser.switchFrame(() => browser.$('aria/BOTTOM').isExisting())
    console.log((await browser.$('body').getHTML()).trim())
    await browser.switchFrame(() => browser.$('aria/RIGHT').isExisting())
    console.log((await browser.$('body').getHTML()).trim())

I will go ahead and close this PR in favor of #13728, thanks for your feedback.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[🐛 Bug]: new selector logic doesn't take iframe switches into consideration

3 participants