时间戳

首页 > 解决方案 > 如何使用 Cypress 获取 javacript 弹出窗口中的内容？

javascript - 如何使用 Cypress 获取 javacript 弹出窗口中的内容？

问题描述

我在我的网站上使用 sweetalert2 来创建弹出窗口。sweetalert2 库在触发触发器（例如单击按钮）时使用 JavaScript 将 DOM 节点添加到页面。添加的所有内容的父节点都是一个 div 标签：

<div class="swal2-container">
   ...
</div>

在我的赛普拉斯测试中，我加载页面并单击触发弹出窗口的按钮。但是，赛普拉斯找不到添加的 DOM 节点（及其子节点）：

it('Get content of popup', () => {
    cy.get("[id='popup_trigger_button']").click()
    cy.get("[class='swal2-container']", {timeout: 10000})
})

测试在最后一行失败，因为赛普拉斯在页面上找不到（添加的）具有“swal2-container”类的节点。我怎样才能让赛普拉斯找到它？

标签： javascriptcypress

解决方案

该类swal2-container不是您寻找的元素上的唯一类，因此完全匹配不起作用。

向属性匹配添加通配符

it('Get content of popup', () => {
  cy.get('[id="popup_trigger_button"]').click()
  cy.get('class*="swal2-container"]')
})

或使用更传统的（部分）点选择器

it('Get content of popup', () => {
  cy.get('[id="popup_trigger_button"]').click()
  cy.get('.swal2-container')
})

此测试针对 SweetAlert2 演示页面运行

it('works with partial attribute selector', () => {
  cy.visit('https://sweetalert2.github.io/')
  cy.contains('button', 'Show success message').click()
  cy.get("[class*='swal2-container']")                    // passes
})

和这个

it('works with class selector', () => {
  cy.visit('https://sweetalert2.github.io/')
  cy.contains('button', 'Show success message').click()
  cy.get('.swal2-container')                              // passes
})

但他的失败是因为班级指定不正确

it('works with partial attribute selector', () => {
  cy.visit('https://sweetalert2.github.io/')
  cy.contains('button', 'Show success message').click()
  cy.get("[class='swal2-container']")                    // fails
})

推荐阅读