Cypress访问一个iframe到另一个ifame

Question

我正试图找到一种解决方案，使用cyprus将iframe访问到iframe中。我已经尝试了以下所有功能，但都没有成功：

Cypress.Commands.add('getIframeBody', (iframeSelector) => {
// get the iframe > document > body
// and retry until the body element is not empty
return cy
.get(iframeSelector)
.its('0.contentDocument.body').should('not.be.empty')
// wraps "body" DOM element to allow
// chaining more Cypress commands, like ".find(...)"
// https://on.cypress.io/wrap
.then(cy.wrap)
})
Cypress.Commands.add('iframev3', { prevSubject: 'element' }, (iframeSelector, callback) => {
// For more info on targeting inside iframes refer to this GitHub issue:
// https://github.com/cypress-io/cypress/issues/136
cy.log('Getting iframe body')
return cy
.get(iframeSelector)
.wrap($iframe)
.should(iframe => expect(iframe.contents().find('body')).to.exist)
.then(iframe => cy.wrap(iframe.contents().find('body')))
.within({}, callback)
})
Cypress.Commands.add('iframeV4', { prevSubject: 'element' }, $iframe => {
return new Cypress.Promise(resolve => {
$iframe.ready(function() {
resolve($iframe.contents().find('body'));
});
});
});

我也尝试过iframe插件。

我尝试用这种方法访问它，例如：

cy.get('#m_c_layoutElem_cmsdesktop').iframeV4()
.get('#m_c_layoutElem_contentview', {timeout: 10 * 1000}).iframeV4().debug()

但总是一样的，我能抓住第一个iframe，但不能抓住第二个！

REgards，

编辑：感谢当前的评论，我进步了一点，这是当前状态：

cy.getIframeBody('#m_c_layoutElem_cmsdesktop')
.then(iframe1 => {   
let iframe2 = iframe1.find('#m_c_layoutElem_contentview')[0]   //Do stuff with queryselector()   
console.log(iframe2);
let iframe3 = iframe2.contentWindow.document.querySelector('#m_c_plc_lt_ctl00_HorizontalTabs_l_c');
console.log('iframe3', iframe3) // This is set to an iframe
console.log(iframe3.contentWindow) //This is null
//debugger
/*let cyIframe3 = Cypress.$(iframe3.contentWindow.document);
console.log('cy iframe3', cyIframe3);
*/            
let cyIframe32 = cy.get(iframe3);
console.log('cy iframe32', cyIframe32); //This is: $Chainer {userInvocationStack: "    at Context.eval (http://localhost:8090/__cypress/tests?p=cypresssupportindex.js:237:25)", specWindow: Window, chainerId: "chainer1656", firstCall: false, useInitialStack: false}
/*let field = iframe3.contentWindow.document.querySelector('#m$c$f$Title$txtText'); // Exception because iframe3.contentWindow is null
console.log(field);
*/
iframe3.find('#m$c$f$Title$txtText').type('Coucou'); //fin is not a function
});

Answer 1

不知道这是否会对您有所帮助，或者您是否已经修复了它，但我确实找到了一个在另一个iframe中访问iframe的解决方案，因为我正试图自己解决这个问题，我将把答案留在这里，希望它能有所帮助。

因此，iframes的id示例：

• Iframe1，id＝"第一个iframe">
• 如果帧2，id＝"second_iframe">

以下是您可以尝试的代码示例：

cy.get('#first_iframe').then($firstIframe => {
const $secondIframeReference = $firstIframe.contents().find('#second_iframe');
cy.wrap($secondIframeReference).as('secondIframeReference'); // Saving this as a reference so we can access it again using get command
// Now we are accessing the second iframe
cy.get('@secondIframeReference').then($secondIframe => {
const $elementYouWant = $secondIframe.contents().find('element you want to interact with');
cy.wrap('$elementYouWant').type("It's writing some stuff"); // In case it is an input field, for example
});
});

阅读这篇文章后进入这个解决方案

Answer 2

它非常简单。有两种方法。(以下是真实可复制的示例(

it("Using 'contentDocument' property and its() - Nested iFrames", function() {
cy.visit("https://www.play1.automationcamp.ir/frames.html")
cy.get("#frame1")
.its('0.contentDocument')
.its('body')
.find("#frame2")
.its('0.contentDocument')
.its('body')
.find("#click_me_2").click()
})

it("Using yielded jQuery element - Nested iFrames", function() {
cy.visit("https://www.play1.automationcamp.ir/frames.html")
cy.get("#frame1").then(function($iFrame1){
const iframe2 = $iFrame1.contents().find('#frame2')
cy.wrap(iframe2).as('iframe2Ref')
cy.get('@iframe2Ref').then(function($iFrame2){
const iFrame2Contents = $iFrame2.contents().find('body')
cy.wrap(iFrame2Contents).find("#click_me_2").click()
})
})
})