Nested Frame Cypress Automation Issue locating the input field

Question

I tried locating the input field by using the below code, but it I keep getting an error as undefined. It looks to me like this is a legacy website with framesets nested within each other that makes it more complicated to enter or type into the username field using Cypress.

import 'cypress-iframe'

describe('Suite Name', () => {

    Cypress.on('uncaught:exception', (err, runnable) => {
        // returning false here prevents Cypress from
        // failing the test
        return false
    })


    it.only('FrameSetExample', () => {
        cy.visit("https://epay.dallascityhall.com/bdisu/public/frameset_top_html.jsp")
        
        cy.get("html > frameset > frame:nth-child(2)").then(($ele) => {
            var ifele = $ele.contents().find("#logonuidfield")
            cy.wrap(ifele).type("sample username")
        })




    })

})

When I try to use the following method "Frame Loaded" it opens the webpage and detects the frame successfully so stuck on what else to attempt to allow this to work properly.

    it.only('FrameSetExample', () => {
        cy.visit("https://epay.dallascityhall.com/bdisu/public/frameset_top_html.jsp")
        cy.frameLoaded("html > frameset > frame:nth-child(2)")
        

        })

Answer 1

It's not an <iframe> so using cypress-iframe is probably the wrong path, but the general commands Cypress give for <iframe> handling are useful.

This answer How do you select elements in a frame (not iframe)... has some useful code.

The only major difficulty is getting the second frame (the application frame) and ignoring the navigation frame.

Building the query chain incrementally and looking at the DOM at each step, at one point you find two windows - the 2nd one must be selected to get to the input fields.

cy.document().find('frameset')
  .find('frame[name="billerdirect_application"]')
  .then($frame => $frame[0].contentWindow)
  .then($window => $window[1])                // there are two windows here, take #2
  .its('document')
  .find('#logonuidfield')
  .type('Willie Nelson')
  .should('have.value', 'Willie Nelson')