如何在Cypress中获取播放列表卡片ID数组并断言页面顺序

核心思路 #

因为不同环境的播放列表ID不同，核心是把预期ID序列和测试代码解耦，要么通过环境变量配置固定顺序，要么直接从后端接口获取动态顺序，避免硬编码ID导致的适配问题。

方法一：通过环境变量配置预期ID（适合固定顺序场景） #

1. 配置环境变量 #

可以在Cypress配置文件中全局设置，或者使用环境专属配置文件区分不同环境：

方式A：在cypress.config.js中全局配置

const { defineConfig } = require('cypress');

module.exports = defineConfig({
  env: {
    // 不同环境可通过命令行或专属配置文件覆盖该值
    expectedPlaylistIds: ['130', '100', '200']
  },
  // 其他Cypress配置项...
});

方式B：使用环境专属配置文件

创建cypress.env.dev.json、cypress.env.prod.json等文件，分别对应不同环境的预期ID：

// cypress.env.dev.json
{
  "expectedPlaylistIds": ["130", "100", "200"]
}

运行测试时指定对应环境文件：

# 开发环境
cypress run --env-file cypress.env.dev.json

# 生产环境
cypress run --env-file cypress.env.prod.json

2. 编写测试代码 #

两种断言方式任选其一：

方式1：提取ID数组后深度对比

it('验证播放列表卡片ID顺序正确', () => {
  cy.visit('/your-landing-page-url'); // 替换为你的落地页实际URL

  const expectedIds = Cypress.env('expectedPlaylistIds');

  cy.get('[data-object-type="playlists"]')
    .should('have.length', expectedIds.length) // 先断言卡片数量匹配
    .then($cards => {
      // 提取所有卡片的ID（根据实际HTML结构调整：比如card.id或card.dataset.id）
      const actualIds = $cards.map((_, card) => card.id).get();
      // 断言顺序完全一致
      expect(actualIds).to.deep.equal(expectedIds);
    });
});

方式2：按索引逐个断言

it('验证播放列表卡片ID顺序正确', () => {
  cy.visit('/your-landing-page-url');

  const expectedIds = Cypress.env('expectedPlaylistIds');

  cy.get('[data-object-type="playlists"]')
    .should('have.length', expectedIds.length)
    .each(($card, index) => {
      // 替换为页面卡片存储ID的实际属性，比如$card.data('id')
      const actualId = $card.attr('id');
      expect(actualId).to.equal(expectedIds[index]);
    });
});

方法二：从接口获取预期顺序（动态适配，推荐） #

如果播放列表的顺序由后端接口返回，直接调用接口拿到预期ID序列，再与页面卡片对比，完全适配不同环境的动态ID：

it('验证播放列表卡片顺序与接口返回一致', () => {
  // 调用获取播放列表的接口（替换为实际接口地址）
  cy.request('GET', '/api/playlists')
    .then(res => {
      // 从接口响应中提取ID数组（根据实际接口返回结构调整）
      const expectedIds = res.body.playlists.map(playlist => playlist.id.toString());

      cy.visit('/your-landing-page-url');

      cy.get('[data-object-type="playlists"]')
        .should('have.length', expectedIds.length)
        .each(($card, index) => {
          // 替换为页面卡片存储ID的实际属性
          const actualId = $card.data('id');
          expect(actualId).to.equal(expectedIds[index]);
        });
    });
});

注意事项 #

• 确认页面中播放列表ID的存储方式：是id属性、data-id还是其他自定义属性，测试代码中需对应调整获取ID的逻辑。
• 使用环境变量时，要确保不同环境的配置文件或命令行参数正确传递预期ID数组。

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