puppeteer - Cypress 或 Puppeteer : How to test page with a react select popup/popover?

Question

请求:使用 Cypress(最好)或通过 cy.task() 使用 Puppeteer 扩展 Cypress , 能够对系统生成的弹出菜单进行测试？

Chrome Devtools 无法检查此弹出菜单元素，因此无法通过 CSS 选择器或 XPath 进行导航。

详细信息:我正在使用 Cypress 进行 UX 测试，并在有限的情况下使用自定义扩展 cy.task()与 Puppeteer。

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

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

• aria-haspopup="true"
• role="combobox"

感谢帮助，谢谢

---

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>

这是选择一个选项的尝试，但它不会将所选选项加载到 <div class="***-singleValue"> 中.

此 Cypress 脚本选择一个选项:

  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 并在单击打开选择时仔细观察。

使用 react-select-async-paginate - Simple Example ，当我点击打开选择时，我可以看到这个 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 的 child - 这些看起来像是要测试的选项。

普通选择器是以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

---

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

有两件事会影响这种选择方法

• 下拉列表会随着您键入字符而变化(重新加载)
• '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)