如何验证多元素共享的属性值是否属于指定取值集合

你的核心需求是验证三个元素的title属性值恰好是指定的三个值（顺序无关），原代码的问题在于只验证了第一个元素的属性，且断言写法有误。以下是两种可行的实现方式：

错误分析 #

1. cy.get('@socialLinks').should('have.attr', 'title') 仅会检查第一个匹配元素的title属性，无法覆盖三个元素的验证。
2. expect('@title').to.contain.oneOf(...) 写法错误：别名@title不能直接作为字符串传入expect，且该逻辑无法验证所有元素的属性值集合。

方案一：遍历验证+集合匹配 #

这种方式先确保每个元素的title都属于指定范围，再验证所有值恰好覆盖预期列表（避免重复值）：

const expectedTitles = ['value 1', 'value 2', 'value 3'];

// 遍历每个元素，验证单个title的合法性
cy.get('.wrapper a')
  .each($element => {
    const currentTitle = $element.attr('title');
    expect(currentTitle).to.be.oneOf(expectedTitles);
  })
  // 验证所有title的集合与预期完全匹配（顺序无关）
  .then($elements => {
    const actualTitles = $elements
      .map((index, element) => element.getAttribute('title'))
      .get(); // 将jQuery对象转为原生数组
    expect(actualTitles.sort()).to.deep.equal(expectedTitles.sort());
  });

方案二：直接获取属性数组断言 #

利用invoke('attr', 'title')一次性获取所有元素的title属性数组，再通过排序后对比忽略顺序：

const expectedTitles = ['value 1', 'value 2', 'value 3'];

cy.get('.wrapper a')
  .invoke('attr', 'title') // 返回所有元素的title组成的数组
  .then(actualTitles => {
    expect(actualTitles.sort()).to.deep.equal(expectedTitles.sort());
  });

不需要额外使用for循环，Cypress的each和then方法已经能很好地处理元素集合的验证逻辑。

内容的提问来源于stack exchange，提问作者testaway