使用 cypress 的 Material UI 下拉列表并不总是有效

Question

我尝试了很多方法，但并不总是有效。我的意思是..它确实找到了该元素并单击它...但并不总是为下拉输入字段添加值。我无法继续测试，因为下拉列表是我需要的必填字段。 下拉输入字段不能为空。

Cypress.Commands.add("selectTooltipDropdownOption", (optionText, inputSelector) => {
    cy.getCyInput(inputSelector,{timeout:10000}).click();

    cy.getCyRole("menu").children('li').contains(optionText).trigger("click", { timeout: 10000 });
  
    cy.getCyInput(inputSelector)
      .invoke("prop", "defaultValue")
      .should("contain", optionText);
  });

我该怎么做才能使遗嘱cy.getCyInput("dropdowninputField")始终具有价值而不是空的？

下拉菜单似乎不是选择类型；它是一个经典的选择组件，具有来自 Material UI 的附加样式。这是它在 HTML 中的样子。我将尺寸做得更小，以便更容易查看，并且位置是根据元素或组件的 ID 动态变化的。

Cypress.Commands.add("selectTooltipDropdownOption", (optionText, inputSelector) => {
    cy.getCyInput(inputSelector,{timeout:10000}).click();

    cy.getCyRole("menu").children('li').contains(optionText).trigger("click", { timeout: 10000 });
  
    cy.getCyInput(inputSelector)
      .invoke("prop", "defaultValue")
      .should("contain", optionText);
  });

Answer 1

由于测试有时会通过，因此“操作”部分是正确的，但不稳定的结果表明存在计时问题，即未正确等待异步内容。

您唯一要做的等待是最后一行.invoke("prop", "defaultValue").should("contain", optionText)，因此这将是错误的断言。

通常defaultValue告诉下拉列表在用户从不选择值的情况下使用什么默认值，因此当选择不同的值时它不会改变。

检查内部值或显示文本

您可以检查内部使用的元素value的<input>。

cy.getCyInput(inputSelector)
  .find('input')               // this is where the selected value is stored
  .invoke('val')
  .should('eq', <internal-value>)

你需要知道是什么<internal-value>？它可能是optionText也可能是代码。
例如，optionText“英国”的代码可能为“UK”。

或者使用text标签中显示的 - 它是顶部元素的第一个子元素，具有“组合框”的角色。

cy.getCyInput(inputSelector)
  .find('[role="combobox"]')
  .invoke('text')
  .should('eq', optionText)

检查顶部元素（具有属性）的 HTMLdata-cy-input="..."以查看这是否正确。由于您只显示菜单选项的 HTML，所以我正在猜测。

如果您的 HTML 遵循在线示例，那么它将是这样的

• 包含您传递的属性<div>的顶层data-cy-inputinputSelector
• 具有所选选项文本的“标签”子 div（仅在选择后）
• 具有与所选选项相对应的值的隐藏子输入（仅在选择后）

<div data-cy-input="data test attribute here">
  <div role="combobox" ...>Selected option text here</div>
  <input aria-hidden="true" ... value="selected option value here">