cypress semantic-ui-react 菜单测试 - 没有获取菜单选项的内容

Question

我正在使用 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>

这是我迄今为止对 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'])
})

但是这个 returns div 的列表而不是我正在寻找的实际测试内容。有任何想法吗？

Answer 1

你不能只做 options.map 没有数组和传播操作吗？我认为你这样做的方式只是将一个数组插入另一个数组......

如果选项返回为未定义或空的问题，只需输入

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

Answer 2

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

元素的文本内容将从 o.innerText 属性而不是 o.value.

返回

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

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

cy.get('.menu .item')
  .invoke('text')
  .should('eq', 'SmallMediumLargeExtra Large')

// OR

cy.get('.menu')
  .invoke('text')
  .should('eq', '\n  Small\n  Medium\n  Large\n  Extra Large\n')

有了这些，请注意菜单中非选项文本的可能性，因为它只会抓取它可以在您提供的选择器中找到的所有文本。

cypress semantic-ui-react 菜单测试 - 没有获取菜单选项的内容

cypress semantic-ui-react menu tests - not getting content of menu options

automated-tests

browser-automation

cypress