与iframe中的元素交互
<h1>1、说明</h1>
<p>cypress 与iframe内容的交互不是很友好，<a href="https://www.cypress.io/blog/2020/02/12/working-with-iframes-in-cypress/#custom-command">官方说明</a>如下：</p>
<pre><code>Cypress has a ... difficulty working with iframes. Mostly because all built-in cy DOM traversal commands do hard stop the moment they hit #document node inside the iframe.</code></pre>
<p>如果需要测试的内容在<code>iframe</code>中，需要做特殊的处理有。</p>
<h1>2、如何与<code>iframe</code>中的元素交互</h1>
<p>Let's write a helper function to get to the body element.</p>
<h5>2.1 获取<code>iframe</code>元素的<code>document</code>元素</h5>
<pre><code>const getIframeDocument = () => {
return cy
.get('iframe[data-cy="the-frame"]')
// Cypress yields jQuery element, which has the real
// DOM element under property "0".
// From the real DOM iframe element we can get
// the "document" element, it is stored in "contentDocument" property
// Cypress "its" command can access deep properties using dot notation
// https://on.cypress.io/its
.its('0.contentDocument').should('exist')
}</code></pre>
<h5>2.2 获取<code>iframe</code>元素的<code>body</code></h5>
<pre><code>const getIframeBody = () => {
// get the document
return getIframeDocument()
// automatically retries until body is loaded
.its('body').should('not.be.undefined')
// wraps "body" DOM element to allow
// chaining more Cypress commands, like ".find(...)"
.then(cy.wrap)
}</code></pre>
<h5>2.2 调用</h5>
<pre><code>it('gets the post', () => {
cy.visit('index.html')
getIframeBody().find('#run-button').should('have.text', 'Try it').click()
getIframeBody().find('#result').should('include.text', '"delectus aut autem"')
})</code></pre>
<h1>参考</h1>
<p>[1]. <a href="https://www.cypress.io/blog/2020/02/12/working-with-iframes-in-cypress/#clicking-on-a-button-inside-the-iframe">官方文档</a>
[2]. <a href="https://www.thinbug.com/q/52720850">使用cypress-iframe插件</a></p>