前端analysis | 知其所以然

Cypress+Playwright数据UI同步验证

2025-04-21

UI 数据同步验证 是确保两个或多个数据中心（DC）在展示给用户的界面数据上一致性的重要过程。UI 层的数据通常包括页面上展示的文本、表单字段、按钮状态、图片等，而这类数据会受到前端与后端交互的影响，因此在不同数据中心之间确保 UI 数据一致性需要经过仔细的验证。

以下是实现 UI 数据同步验证 和 确保两个数据中心的数据一致性 的几个关键步骤：

1. 定义同步验证标准

首先，需要明确在 UI 层面，哪些数据需要同步。通常包括：

  • 页面内容：包括文本、标题、按钮标签、表单内容等。
  • 数据表格和列表：例如用户列表、产品列表等。
  • 日期和时间戳：尤其是在时区不同的情况下，时间相关数据可能需要特别处理。
  • 用户交互元素状态：如按钮的启用/禁用状态、复选框的选中状态等。

定义好验证标准后，可以为每个 UI 元素确定预期值，进而进行对比。

2. 选择测试工具与框架

选择合适的自动化测试工具来执行 UI 数据同步验证。Cypress 和 Playwright 都是常用的前端自动化测试工具，可以帮助进行 UI 层的验证：

  • Cypress：侧重于易用性和集成，适合进行功能性 UI 测试和快速验证。
  • Playwright：支持更广泛的浏览器和设备，适合进行更复杂的 UI 测试，支持多浏览器的并行执行。

3. 通过 UI 层面抓取数据

你可以使用 Cypress 或 Playwright 来抓取两个数据中心的 UI 元素数据，并进行对比。

Cypress 示例：抓取数据并对比 UI 数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
describe('Data Center UI Sync Comparison', () => {
  it('should compare UI data between DC1 and DC2', () => {
    // 访问数据中心1
    cy.visit('https://dc1.your-app.com');
    cy.get('.user-list').then(($dc1List) => {
      const dc1Data = $dc1List.map((index, element) => {
        return Cypress.$(element).text(); // 提取文本内容
      }).get();
      
      // 访问数据中心2
      cy.visit('https://dc2.your-app.com');
      cy.get('.user-list').then(($dc2List) => {
        const dc2Data = $dc2List.map((index, element) => {
          return Cypress.$(element).text();
        }).get();
        
        // 对比两个数据中心的 UI 数据
        expect(dc1Data).to.deep.equal(dc2Data);
      });
    });
  });
});

在上述示例中，我们访问了两个数据中心的相同页面，并抓取了 .user-list 这个 UI 元素的文本内容，最后进行了深度比较。

Playwright 示例：抓取数据并对比 UI 数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const { test, expect } = require('@playwright/test');

test('Compare UI data between DC1 and DC2', async ({ page }) => {
  // 访问数据中心1
  await page.goto('https://dc1.your-app.com');
  const dc1Data = await page.locator('.user-list').allTextContents();

  // 访问数据中心2
  await page.goto('https://dc2.your-app.com');
  const dc2Data = await page.locator('.user-list').allTextContents();

  // 对比两个数据中心的 UI 数据
  expect(dc1Data).toEqual(dc2Data);
});

这个 Playwright 示例展示了如何抓取 UI 数据并进行对比。我们使用 locator 来选择页面中的 UI 元素并提取它们的文本内容。

4. 处理异步数据加载

UI 数据通常是异步加载的，特别是在现代单页应用（SPA）中。因此，需要确保在执行 UI 数据抓取时，数据已完全加载并渲染。

在 Cypress 中，可以通过 cy.wait() 或监听网络请求来确保数据加载完成：

1
2
3
4
5
6
7
cy.intercept('GET', '/api/user-data').as('getUserData');
cy.visit('https://dc1.your-app.com');
cy.wait('@getUserData');  // 等待 API 请求完成
cy.get('.user-list').then(($list) => {
  const dc1Data = $list.text();
  // 比较数据...
});

在 Playwright 中，你可以使用 page.waitForResponse() 或 page.waitForSelector() 来等待数据加载完成：

1
2
3
4
await page.goto('https://dc1.your-app.com');
await page.waitForResponse(response => response.url().includes('/api/user-data') && response.status() === 200);
const dc1Data = await page.locator('.user-list').allTextContents();
// 比较数据...

5. 处理数据格式和时间差异

如果 UI 数据包括时间戳、日期等需要按时区处理的内容，确保两个数据中心的时区一致，或者在验证时加入合理的时间容忍度。对于不同地区的用户，日期和时间可能不同，因此需要在验证时排除时区和时间差的影响。

例如，比较两个数据中心中的 日期 字段时，可以使用以下策略：

  • 统一时区：转换为 UTC 或统一时区后再进行比较。
  • 时间容忍度：如果时间差异较小（如几秒钟或几分钟），可以设定时间容忍度来允许这些轻微差异。
1
2
3
4
const dc1Date = new Date(dc1Data.date); // 假设我们获取到的时间是字符串格式
const dc2Date = new Date(dc2Data.date);

expect(Math.abs(dc1Date - dc2Date)).toBeLessThan(60000); // 容忍差异不超过1分钟

6. 报告和异常处理

最后，生成比较报告并处理异常。你可以在测试失败时记录详细信息，例如：

  • 数据不一致的元素：记录哪些 UI 元素的数据不一致。
  • 错误日志：生成错误日志，包括请求响应时间、状态码等，以便进一步调查。

在 Cypress 中，你可以使用 cy.screenshot() 截图，或者使用 cy.task() 将错误信息发送到外部日志系统：

1
2
cy.screenshot('data-mismatch-screenshot');
cy.task('logError', { message: 'UI data mismatch', dc1Data, dc2Data });

在 Playwright 中，你可以通过 page.screenshot() 截图并输出详细的错误日志：

1
2
await page.screenshot({ path: 'data-mismatch-screenshot.png' });
console.error('Data mismatch between DC1 and DC2', { dc1Data, dc2Data });

7. 自动化与定期验证

由于数据中心的 UI 数据可能随时发生变化，建议设置定期的自动化测试，确保数据同步性。在 CI/CD 流程中加入这类测试，能够在每次部署后及时发现数据差异，保障用户体验。

总结

要进行 UI 数据同步验证 并确保两个数据中心的数据一致性，关键步骤包括：

  1. 抓取 UI 数据：使用 Cypress 或 Playwright 抓取 UI 元素并提取数据。
  2. 确保数据加载完毕：通过等待异步加载数据，确保数据完全渲染。
  3. 处理时区和数据格式差异：合理处理时间和格式差异，避免误判。
  4. 生成报告和异常处理：记录并报告数据不一致的情况，便于快速修复。
  5. 定期验证：将此类测试集成到 CI/CD 流程中，确保持续的 UI 数据一致性。

通过上述方法，你可以确保不同数据中心的 UI 数据在用户界面上的一致性，保障跨地域用户的良好体验。 但是这种方式，仅限于不同url，同时可获取到。如果url中数据，不可同时获取，该如何？

如果 URL 中的数据不可同时获取（即无法在同一时刻从两个数据中心获取数据进行对比），可以采取 异步获取和比对的策略。这种情况通常出现在以下几种场景中：

  1. 数据延迟加载：页面中的某些数据依赖于后台请求或异步操作，需要等待一定时间才能加载完成。
  2. 动态数据生成：不同数据中心可能有不同的处理方式，导致同一请求返回的数据顺序或格式不同。
  3. 不对等数据访问：由于网络延迟、API 请求限制或数据隐私，不能直接在同一时刻获取两个数据中心的数据。

为了处理这种情况，可以采取以下几种方法：

1. 分阶段获取数据并保存

可以在 Cypress 或 Playwright 中通过多次请求、分别抓取数据，并在后续步骤中比较。这种方法适用于通过异步请求或不同步骤加载的数据。

方案：步骤化请求和比对

  1. 分别请求两个数据中心：首先分别访问两个数据中心，获取它们的UI或API数据。
  2. 缓存数据：在获取数据时，先将每个数据中心的数据缓存下来（例如在本地变量或文件中），然后再执行比较。
  3. 比较存储的数据：等待所有数据加载完毕后再进行对比。
Cypress 示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
describe('UI Data Comparison between DC1 and DC2', () => {
  it('should compare data from two different data centers', () => {
    // 获取数据中心1的UI数据
    cy.visit('https://dc1.your-app.com');
    cy.get('.data-container').then(($dc1Data) => {
      const dc1Text = $dc1Data.text();

      // 获取数据中心2的UI数据
      cy.visit('https://dc2.your-app.com');
      cy.get('.data-container').then(($dc2Data) => {
        const dc2Text = $dc2Data.text();

        // 比较两个数据中心的数据
        expect(dc1Text).to.equal(dc2Text);
      });
    });
  });
});
Playwright 示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const { test, expect } = require('@playwright/test');

test('Compare data between two data centers asynchronously', async ({ page }) => {
  // 获取数据中心1的UI数据
  await page.goto('https://dc1.your-app.com');
  const dc1Data = await page.locator('.data-container').textContent();

  // 获取数据中心2的UI数据
  await page.goto('https://dc2.your-app.com');
  const dc2Data = await page.locator('.data-container').textContent();

  // 比较两个数据中心的数据
  expect(dc1Data).toBe(dc2Data);
});

2. 延迟等待和超时处理

有时数据加载可能需要额外的时间，尤其是在处理动态加载的内容时。你可以为每个数据中心设置 延迟等待机制，确保数据完全加载后再进行比较。

Cypress 延迟等待：

1
2
3
4
5
6
7
8
9
10
11
cy.visit('https://dc1.your-app.com');
cy.wait(5000); // 等待5秒，确保数据加载完成
cy.get('.data-container').then(($dc1Data) => {
  const dc1Text = $dc1Data.text();
  cy.visit('https://dc2.your-app.com');
  cy.wait(5000); // 等待5秒，确保数据加载完成
  cy.get('.data-container').then(($dc2Data) => {
    const dc2Text = $dc2Data.text();
    expect(dc1Text).to.equal(dc2Text);
  });
});

Playwright 延迟等待：

1
2
3
4
5
6
7
8
9
await page.goto('https://dc1.your-app.com');
await page.waitForTimeout(5000);  // 等待5秒
const dc1Data = await page.locator('.data-container').textContent();

await page.goto('https://dc2.your-app.com');
await page.waitForTimeout(5000);  // 等待5秒
const dc2Data = await page.locator('.data-container').textContent();

expect(dc1Data).toBe(dc2Data);

注意：尽管延迟等待可作为解决方案之一，但使用 waitForTimeout() 不是最佳实践，应该尽可能依赖于更精确的等待条件（例如：cy.get()、page.locator().waitFor() 等），避免长时间的静态等待。

3. API 数据同步

如果两个数据中心的数据是通过 API 获取的，你可以并行请求 API，等待两边的请求完成后再进行数据比较。比如，可以通过 Promise.all（Playwright）或 cy.request()（Cypress）并行发起两个请求，获取并比较返回的数据。

Cypress API 同步请求：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
describe('API Data Comparison between DC1 and DC2', () => {
  it('should compare API responses between DC1 and DC2', () => {
    // 请求数据中心1的API
    cy.request('https://dc1.your-app.com/api/data').then((response1) => {
      const dc1Data = response1.body;

      // 请求数据中心2的API
      cy.request('https://dc2.your-app.com/api/data').then((response2) => {
        const dc2Data = response2.body;

        // 比较两个数据中心的API返回数据
        expect(dc1Data).to.deep.equal(dc2Data);
      });
    });
  });
});

Playwright API 同步请求：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const { test, expect } = require('@playwright/test');

test('Compare API data between two data centers', async () => {
  // 请求数据中心1的API
  const response1 = await fetch('https://dc1.your-app.com/api/data');
  const dc1Data = await response1.json();

  // 请求数据中心2的API
  const response2 = await fetch('https://dc2.your-app.com/api/data');
  const dc2Data = await response2.json();

  // 比较两个数据中心的API返回数据
  expect(dc1Data).toEqual(dc2Data);
});

4. 数据分批次同步

在某些情况下，UI 数据可能是分批加载的（例如分页或无限滚动）。你可以在测试中模拟分页操作或滚动操作，分别获取每一批次的数据，然后进行对比。一般来说，这种情况下需要使用 递归 或 循环 来加载所有数据，确保在对比之前所有数据都已经获取。

Cypress 分批加载数据（模拟分页）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
describe('Paginated UI Data Comparison between DC1 and DC2', () => {
  it('should compare paginated data between DC1 and DC2', () => {
    // 获取第1页数据中心1的数据
    cy.visit('https://dc1.your-app.com?page=1');
    cy.get('.data-container').then(($dc1DataPage1) => {
      const dc1Page1Data = $dc1DataPage1.text();

      // 获取第1页数据中心2的数据
      cy.visit('https://dc2.your-app.com?page=1');
      cy.get('.data-container').then(($dc2DataPage1) => {
        const dc2Page1Data = $dc2DataPage1.text();

        // 对比第1页数据
        expect(dc1Page1Data).to.equal(dc2Page1Data);
        
        // 如果有更多页，继续分页对比
        cy.visit('https://dc1.your-app.com?page=2');
        cy.get('.data-container').then(($dc1DataPage2) => {
          const dc1Page2Data = $dc1DataPage2.text();
          cy.visit('https://dc2.your-app.com?page=2');
          cy.get('.data-container').then(($dc2DataPage2) => {
            const dc2Page2Data = $dc2DataPage2.text();
            expect(dc1Page2Data).to.equal(dc2Page2Data);
          });
        });
      });
    });
  });
});

5. 断言和容忍度

在比较数据时，可能存在轻微的差异（例如，响应时间不同或数据同步的延迟）。在这种情况下，你可以使用 容忍度（tolerance） 来容忍某些差异，避免错误判断。

例如，对于数字数据，你可以设定一个最大容忍误差：

1
expect(Math.abs(dc1Data - dc2Data)).toBeLessThan(10);  // 允许的误差为10

对于时间数据，可以允许一定的时差：

1
2
3
const dc1Date = new Date(dc1Data);
const dc2Date = new Date(dc2Data);
expect(Math.abs(dc1Date - dc2Date)).toBeLessThan(60000);  // 允许误差不超过1分钟

总结

当 URL 中数据不可同时获取 时，你可以通过以下策略进行数据比较：

  1. 分阶段获取数据：分别访问不同的数据中心，抓取数据后再进行对比。
  2. 延迟等待和超时处理：确保数据完全加载后再进行验证，避免因数据加载延迟导致比较失败。
  3. **

这样也不一定最优？ 你有什么更好的建议吗？欢迎在评论区分享你的想法和经验。

本文作者：前端analysis
联系邮箱：cheonghu@126.com
版权声明： 本文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处！
Tags: 自动化测试 cypress selenium
← Cypress升级路线 Prometheus+grafana数据 Ui同步验证 →
赏
使用支付宝打赏
使用微信打赏

若你觉得我的文章对你有帮助，欢迎点击上方按钮对我打赏