使用 cypress 的材质 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")

始终具有值而不是空？

下拉菜单好像不是select类型；它是一个经典的选择组件，具有来自 Material UI 的附加样式。下面是它在 HTML 中的外观。我把它改小了，因为总共有 37 个国家，并且位置是根据元素或组件的 ID 动态变化的。

<div
  role="tooltip"
  class="jss390"
  style="
    position: absolute;
    top: 0px;
    left: 0px;
    transform: translate3d(317px, 412px, 0px);
    will-change: transform;
  "
  x-placement="bottom"
>
  <div class="MuiPaper-root MuiPaper-elevation8 MuiPaper-rounded">
    <ul
      class="MuiList-root jss389 MuiList-padding"
      role="menu"
      tabindex="-1"
      data-cy-action="select-action-root/insured/seller/0/data/address/country"
      style="min-width: 271px"
    >
      <li
        class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
        tabindex="0"
        role="menuitem"
        aria-disabled="false"
      >
        Austria<span class="MuiTouchRipple-root"></span>
      </li>
      <li
        class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
        tabindex="-1"
        role="menuitem"
        aria-disabled="false"
      >
        Belgium<span class="MuiTouchRipple-root"></span>
      </li>
      <li
        class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
        tabindex="-1"
        role="menuitem"
        aria-disabled="false"
      >
        British Virgin Islands<span class="MuiTouchRipple-root"></span>
      </li>
      <li
        class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
        tabindex="-1"
        role="menuitem"
        aria-disabled="false"
      >
        Bulgaria<span class="MuiTouchRipple-root"></span>
      </li>
      <li
        class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
        tabindex="-1"
        role="menuitem"
        aria-disabled="false"
      >
        Cayman Islands<span class="MuiTouchRipple-root"></span>
      </li>
      <li
        class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
        tabindex="-1"
        role="menuitem"
        aria-disabled="false"
      >
        Croatia<span class="MuiTouchRipple-root"></span>
      </li>
      <li
        class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
        tabindex="-1"
        role="menuitem"
        aria-disabled="false"
      >
        Cyprus<span class="MuiTouchRipple-root"></span>
      </li>
      <li
        class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
        tabindex="-1"
        role="menuitem"
        aria-disabled="false"
      >
        Czech Republic<span class="MuiTouchRipple-root"></span>
      </li>
      <li
        class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
        tabindex="-1"
        role="menuitem"
        aria-disabled="false"
      >
        Denmark<span class="MuiTouchRipple-root"></span>
      </li>
      <li
        class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
        tabindex="-1"
        role="menuitem"
        aria-disabled="false"
      >
        Estonia<span class="MuiTouchRipple-root"></span>
      </li>
    </ul>
  </div>
</div>

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)

检查顶部元素的 HTML（具有属性

data-cy-input="..."

）以查看这是否正确。由于您只显示菜单选项的 HTML，所以我正在猜测。

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

• 顶级

  <div>

  以及您作为

  data-cy-input

   传递的 

  inputSelector
属性
• 一个“标签”子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">