1

I've written two custom functions to allow Cypress to access a frame and select a menu item from this code:

    <frame name="leftFrame" scrolling="YES" noresize="" src="mainMenu.jsp" 
    xpath="1">
    #document
      <html>
        <head>...</head>
    <tr xpath="1">
    <td width="1"><img src="/tlm/image/spacer.gif" height="1" width="1" 
    align="absmiddle" border="0"></td>
    <td id="submenu" class="submen" width="1" style="background-color: 
    rgb(227, 221, 218);"></td>
    <td>
      <table class="submenubutton" border="0" cellspacing="0" 
        cellpadding="0">
         <tbody>
            <tr>
               <td onmouseover="this.style.backgroundColor='GS6'" onmouseout="this.style.backgroundColor='FFFFFF'" style="background-color: rgb(255, 255, 255);">
                  <a class="submenubuttontext" href="/au/clearMenu" target="content">
                  Clothing
                  </a>
               </td>
            </tr>
         </tbody>
      </table>
   </td>
   <td id="submenupadright2" class="submenup" width="1" style="background-color: rgb(227, 221, 218);"></td>
</tr>

The custom functions:

const getIframeDocument = () => {
  return cy
  .get("frame[name=leftFrame]")
  .its("0.contentDocument")
  .should("exist");
};

const getIframeBody = () => {
  // get the document
  return getIframeDocument()
  .its("body")
  .should("not.be.undefined")
  .then(cy.wrap);
};

This allows me to jump into the frame and interact with items:

 getIframeBody().find("#menu_18").should("contain.text", 
 "Clothing").click();
Improve this question

1 Answer 1

Reset to default
0

The real trouble will be that frame. Cypress has a trouble with that, but after some googling, you can find this blog post on Cypress site. I think you can pretty much just follow that article and make it happen for your example.

Some key points:

  • you will need to write custom code that will access that frame => this means some helper methods
  • if you return (and it's a good idea to do it like that) the result of .wrap() from the helper method(s), you can later access your link by just for example typing: getFrameBody().find('.submenubutton').find('a').click() => once you "get inside" the frame, you can use standard .find() command that could be chained more times, which is the way to find your link

The example code could be found here (it's part of the article I linked above).

Improve this answer
1
  • 1
    thank you @pavelsaman. I solved with your help. Now I need to to jump into a second frame which is yielded on clicking the 'Clothing' link in the menu frame. This frame has an onload event and is proving tricky to access its elements but thats for another question!
    – Steerpike
    Commented Jul 2, 2020 at 8:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.