When I click the button with text 'Create' the text is replaced to 'Confirm?' This is the HTML:
and the pageObject:
create() {
return cy.get('im-page.hydrated', { includeShadowDom: true })
.find('im-button', { includeShadowDom: true })
.eq(1)
.find('button', { includeShadowDom: true })
.click({ force: true })
}
confirmBtn() {
return cy.get('im-page.hydrated').find('im-button')
.eq(1)
.find('button.success.outline')
.contains('Confirm?')
}
Then when Cypress click on Confirm I got this error:
There's an issue logged doc.createTreeWalker is not a function #20813 but not yet resolved.
From the source code the doc part refers to the previous subject, i.e the element before the .find() which above is cy.get('im-page.hydrated').find('im-button').eq(1).
My guess is because the button changes on the Create click, something in that previous subject becomes invalid when you try to access the Confirm button.
A couple of ideas to try (just guesses at this stage)
// using jquery to avoid the treeWalker (used by the .find() command)
cy.get('im-page.hydrated im-button:eq(1) button.success.outline:contains(Confirm)')
// using an alias and "withinSubject" option to explicitly define `doc`
cy.get('im-page.hydrated im-button:eq(1)`).as('parent')
cy.get('@parent').then($parent => {
cy.get('button.success.outline:contains(Confirm)', { withinSubject: $parent })
You should turn on shadowDOM globally to avoid missing any parts that need it.
// cypress.json
{
...
"includeShadowDom": true
}
#3 - just do a simple search for "Confirm", since likely only one thing at a time needs confirming.
cy.contains('button.success.outline', 'Confirm')