Cypress 或 Puppeteer：如何使用 React select popup/popover 测试页面？

Question

要求： 使用 Cypress（最好）或通过 cy.task() 使用 Puppeteer 扩展 Cypress，是否能够对系统生成的弹出菜单执行测试？

Chrome Devtools 无法检查此弹出菜单元素，因此无法通过 CSS select 或 XPath 导航。

详细信息： 我正在使用 Cypress 进行 UX 测试，并在有限的情况下使用自定义 cy.task() 和 木偶师.

被测网页有下拉菜单selection生成弹出菜单，来源是这个npm模块： npm react-select-async-paginate

经检查，弹出菜单是从 an 生成的，它具有以下两个属性：

感谢帮助，谢谢

2 月 22 日，更新

这是生成的react-select-async-paginate:

<div>
  <div class="***-singleValue">Offer Letter w/ Signature</div>
  <div class=" css-ackcql" data-value="">
    <input 
        id="react-select-2-input" 
        aria-autocomplete="list" 
        aria-expanded="false" 
        aria-haspopup="true"
        aria-controls="react-select-2-listbox" 
        aria-owns="react-select-2-listbox" 
        role="combobox">
  </div>
</div>

这是 select 选项的尝试，但它不会将 select 选项加载到 <div class="***-singleValue">。

这个 Cypress 脚本 select 是一个选项：

  cy.get(`${selectorReactSelectPaginate}`)
    .find('input[role="combobox"]')
    .focus()
    .type($valueSelect, { force: true })
    .then(() => {
      cy.wrap(true);
    });

正如能够使用此 Cypress 脚本验证的那样：

  cy.get(selectorReactSelectPaginate)
    .find('div[class*="-singleValue"]')
    .contains($valueSelectContains)
    .then(() => {
      cy.wrap(true);
    });

Answer 1

是的，由于模糊事件（来自库本身），选项列表很难在 devtools 中获取。一种方法是打开 devtools 并在单击打开 select.

时仔细观察

使用 react-select-async-paginate - Simple Example，当我点击打开 select 时，我可以看到这个 div 出现和消失

<div id="react-select-2-listbox">

所以我可以使用 Cypress 看看里面的东西

cy.get('[role="combobox"]').click()

cy.get('#react-select-2-listbox')
  .then($listbox => {
    console.log($listbox)
  })

现在在 devtools 控制台中，查看 children 属性（有一个 child），然后查看 child 的 children - 这些看起来喜欢要测试的选项。

常见的select或者是以react-select-2-option开头的id，所以我可以这样测试

cy.get('[role="combobox"]').click()

cy.get('#react-select-2-listbox')
  .find('[id^="react-select-2-option"]')   // all div's with id starting react-select-2-option
  .should('have.length', 10)
  .eq(3)                      // check out the 4th option
  .invoke('text')
  .should('eq', 'Option 4')   // passes

通过在框中键入来选择一个选项

有两件事影响 selecting

的这种方法

下拉列表会随着您键入字符而改变（重新加载）
元素 'div[class*="-singleValue"]' 仅在您确认输入的值后出现（输入键或 blur()，我不确定是哪个）。

这对我有用

// Type in the option
cy.get(selectorReactSelectPaginate)
  .find('[role="combobox"]')
  .type(valueToSelect)

// Wait for the listbox to respond
cy.get('#react-select-2-listbox')
  .should('contain', valueToSelect)  

// Blur or enter will set the value
cy.get(selectorReactSelectPaginate)
  .find('[role="combobox"]')
  .type('{enter}')
  .blur()

// Check the value
cy.get(selectorReactSelectPaginate)
  .find('div[class*="-singleValue"]')
  .should('contain', valueToSelect)

Answer 2

测试运行器的一个巧妙技巧是在出现下拉选择后添加一个 .wait()。将创建 DOM 的快照，您可以单击 .wait() 查看快照并使用开发工具检查下拉选择。

Cypress 或 Puppeteer：如何使用 React select popup/popover 测试页面？

Cypress or Puppeteer: How to test page with a react select popup/popover?

react-select

puppeteer

cypress