文章/答案/技术大牛

发布

社区首页 >问答首页 >Cypress访问iframe到另一个iframe

问Cypress访问iframe到另一个iframe
EN

Stack Overflow用户

提问于 2020-10-30 10:00:28

回答 1查看 3.2K关注 0票数 2

我正试图找到一个解决方案，以获得一个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()

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

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=cypress\support\index.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
        });

javascript

cypress

回答 1

Stack Overflow用户

发布于 2020-12-16 23:26:14

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

因此，iframes的id示例如下：

Iframe1，id=‘first_iframe’
Iframe2，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
  });
});

在阅读了这个文章之后，进入了这个解决方案

票数 6

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64606194

复制

相似问题

问Cypress访问iframe到另一个iframe
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Cypress访问iframe到另一个iframeEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Cypress访问iframe到另一个iframe
EN