赛普拉斯语义UI反应菜单测试-未获取菜单选项的内容

Question

我正在使用赛普拉斯js进行语义语义UI的组件编写一些测试。

这里是包含我要测试的元素的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>

这是到目前为止我对该div中的元素进行的小测试：

    cy.get("[data-testid=images-count]").within($result => {
       cy.findByRole("alert").should("have.text", "Medium");
       cy.get(".icon").should("be.visible");
       cy.get(".menu").should("not.be.visible");
       cy.get("[data-testid=font-select]").click();
       cy.get(".menu").should("be.visible");
    });

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

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

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

Answer 1

您不能只在没有数组的情况下执行options.map并传播op吗？我认为您的操作方式是将一个数组插入另一个数组...

Answer 2

要使选项传递到.then(options => ...)中，您需要在cy.get()选择器中更具体。