How do you select elements in an frame using Cypress?

0
votes

I have seen posts such as Cypress - run test in iframe for how to handle iframes in Cypress. I am still chewing on that, but even more old and outdated are plain old frames, which is what a legacy system (that I have to test) uses.

I have checked Github -Cypress iframes which is recommended by Cypress, but haven't found an answer for plain old frames. Using the solution for iframe, hasn't worked.

The problem is the same as with an iframe where, when trying to select an element using

cy.get('input').type('test');

you receive an AssertionError stating the typical:

Timed out retrying after 4000ms: Expected to find element: input, but never found it.

Any advice is appreciated.

2
iframecypressframe

2 Answers

1
votes

I don't have any experience with <frame>, but testing on this source

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>

<head>
  <meta name="robots" content="noindex">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Example page</title>
</head>

<frameset cols="150,*">
  <frame src="example_a.html">
  <frame src="example_b.html">
  <noframes>
    <body>
      <p>Alternate content</p>
    </body>
  </noframes>
</frameset>

</html>

example_b.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
  <meta name="robots" content="noindex">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Example page</title>
</head>

<body>
  <input />
</body>

</html>

this test works

cy.visit('http://127.0.0.1:5500/index.html')  // served from vscode

cy.get('frame')
  .eq(1)                                     // 2nd frame
  .then($frame => $frame[0].contentWindow)   // it's window
  .its('document.body')                      
  .within(() => {                  // sets cy.root() to 2nd frame body
    cy.get('input')
      .type('something')
      .invoke('val')
      .should('eq', 'something')
  })

If you've got more complicated stuff to do, you can try visiting the frame's source, for example this makes the frame content the top window

cy.visit('http://127.0.0.1:5500/example_b.html')

cy.get('input')
  .type('something')
  .invoke('val')
  .should('eq', 'something')
0
votes

You can try something like this:

cy.get('#iframeSelector')
       .then(($iframe) => {
            const $body = $iframe.contents().find('body')

                cy.wrap($body)
                    .find('input')
                    .type('test')
            });