Cypress - 如何迭代环境变量的值并验证轮播列表中的每个项目

Question

我想测试我网站上的轮播是否包含以公司徽标表示的正确项目。每个轮播项目都有一个带有“alt”属性的 元素，该属性是存储公司名称的位置。

我在 cypress.env.json 文件中设置了一个环境变量，其表示如下：

"companyPartners": {     
    "title": "Company Partners",     
    "partners": {         
        "google": "Google",         
        "facebook": "Facebook",         
        "instagram": "Instagram",         
        "linkedin": "LinkedIn"     
    } 
} 

轮播元素以无序列表表示，如下所示：

<ul class="carousel-partners ...">
    <li>
        <a class="carousel-item">
            <img alt="Google" src="...">
        </a>
    </li>
    <li>
        <a class="carousel-item">
            <img alt="Facebook" src="...">
        </a>
    </li>
    ...
</ul>

因此，我想迭代每个轮播项目并验证环境变量中的值是否与轮播项目的“alt”属性匹配。

在 Cypress 中运行此命令时，我收到一条错误，表示仅检索第一个字母：

Cypress.Commands.add("verifyPartners", () => {
    const companyPartners = Cypress.env("companyPartners").partners
    let text = ""
    for(const x in companyPartners){
        text += companyPartners[x]
    }

    cy.get('*[class^="carousel-partners"]').find("li").each(($listItem, index) => {
        cy.wrap($listItem).find("img").should("have.attr", "alt", text[index])
    })
});

断言预期具有值为G的属性alt，但该值为Google

有什么办法可以验证物品吗？任何帮助将不胜感激。

Answer 1

我假设列表和 DOM 元素之间存在一对一的等价关系。

要做到这一点

• 使用

  Object.values()

将合作伙伴对象转换为 RHS 值数组
• 使用

  within()

  缩小查询范围
• 检查每个合作伙伴名称是否位于

  <img>

  内

  <li>

内的 DOM 中
• 然后检查有没有多余的

  <img>

  标签

const partners = Cypress.env("companyPartners").partners

/* 
  take value part of key/value in partners object
  yields ['Google','Facebook',...]
*/
const companies = Object.values(partners)

cy.get('ul.carousel-partners').within(() => {
  // queries here only apply to the contents of the <ul>

  // Two questions:

  // 1) Does every partner exist in the DOM on an li[alt] attribute?
  companies.forEach((company) => {
    cy.get(`li img[alt="${company}"]`)   // passes if exists
  })

  // 2) Does every DOM <li> have a value in the partners list?
  cy.get('li img').each(($img) => {
    const alt = $img.attr('alt')
    expect(alt).to.be.oneOf(companies)
  })

})