Automated tests cypress语义ui反应菜单测试-不获取菜单选项的内容

我在这里编写了一些关于一个组件的测试，该组件使用semantic react ui，使用cypress js进行测试

下面是包含我希望测试的元素的div：

<div data-testid="images-count" class="customize-row images-count">
   <h3 data-testid="option-name-8" class="option-name">Font Size</h3>
   <div data-testid="font-select" role="listbox" aria-expanded="true" class="ui active visible selection dropdown option-input images-select" tabindex="0">
      <div class="text" role="alert" aria-live="polite">Medium</div>
      <i aria-hidden="true" class="dropdown icon"></i>
      <div class="menu transition visible">
         <div role="option" aria-checked="false" aria-selected="false" class="item" style="pointer-events: all;"><span class="text">Small</span></div>
         <div role="option" aria-checked="true" aria-selected="true" class="active selected item" style="pointer-events: all;"><span class="text">Medium</span></div>
         <div role="option" aria-checked="false" aria-selected="false" class="item" style="pointer-events: all;"><span class="text">Large</span></div>
         <div role="option" aria-checked="false" aria-selected="false" class="item" style="pointer-events: all;"><span class="text">Extra Large</span></div>
      </div>
   </div>
</div>

我试图将菜单中的选项放入一个数组，然后根据另一个数组验证它们：

cy.get('.menu').then(options => {
  const actual = [...options].map(o => o.value)
  expect(actual).to.deep.eq(['Small', 'Medium', 'Large', 'Extra Large'])
})

---

但是，这将返回div列表，而不是我要查找的实际测试内容。有什么想法吗

如果没有数组和排列op，你不能只执行options.map？我认为你这样做只是将一个数组插入另一个数组

如果是选项未定义或为空的问题，只需输入一个

const actual = options && options.length > 0 ? options.map(o => o.value) : []

---

要将选项传递到

。然后（options=>…）

，您需要在

cy.get（）

选择器中更加具体

元素的文本内容将从

o.innerText

属性而不是

o.value

返回

cy.get（'.menu.item'）。然后（选项=>{
常量实际值=[…选项].map（o=>o.innerText）；
expect（实际）.to.deep.eq（['Small'，'Medium'，'Large'，'Extra-Large']）；
})

---

通过将所有文本放在一个字符串中，可以更简洁一些

cy.get（'.menu.item'））
.invoke（'text'））
.should（'eq'，'SmallMediumLargeExtra Large'）
//或
cy.get（“.menu”）
.invoke（'text'））
.should（'eq'，'\n小型\n中型\n大型\n超大\n'）

---

使用这些选项时，请小心菜单中可能出现的非选项文本，因为它只会捕获您提供给它的选择器中可以找到的所有文本。

非常感谢您

const actual = options && options.length > 0 ? options.map(o => o.value) : []