预扫描网页进行动态测试

寻找 @JeffTanner 提出的问题的明确答案here https://stackoverflow.com/questions/69095677/cypress-adding-tests-dynamically-within-a-wrap about 生成动态测试。从这个问题和赛普拉斯样本来看，很明显我们需要知道生成它们之前所需的测试数量。

Problem

我们有一个网页，其中包含一个医疗保健分析数据表，该数据在一天中刷新多次。每次刷新团队都必须检查数据，为了分配工作，我们将每一行作为单独的测试运行。但行数每次都不同，这意味着我必须计算行数并在每次运行时更新系统。寻找一种以编程方式获取行数的方法。

HTML 是一个表格<tbody><tr></tr></tbody>，所以以下足以获得计数，但我无法在beforeEach()，抛出的错误是“未找到测试”

let rowCount;

beforeEach(() => {
  cy.visit('/analytics')
  cy.get('tbody tr').then($els => rowCount = $els.length)
})

Cypress._.times(rowCount => {
  it('process row', () => {
    ...
  })
})

The before:run事件在测试开始之前触发，您可以在那里扫描网页。

设置事件监听器setupNodeEvents()。 Cypress 命令不会在此处运行，但您可以使用等效的 Node 命令。

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

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on('before:run', async (details) => {
        try {
          const fetch = require('node-fetch');
          const fs = require('fs-extra');
          const jsdom = require("jsdom");
          const { JSDOM } = jsdom;                           
          
          const response = await fetch(config.env.prescan);  // default below 
          const body = await response.text();                // or pass in command line

          const dom = new JSDOM(body);
          const rows = dom.window.document.body.querySelectorAll('tr')  // query

          // save results
          fs.writeJson('./cypress/fixtures/analytics-rows.json', {rows:rows.length})

        } catch (error) {
          console.log('error:', error)
        }
      })
    },
  },
  env: {
    prefetch: 'url-for-analytics-page'
  }
})

Test

import {rows} from './cypress/fixtures/analytics-rows.json'  // read row count

Cypress._.times(rows, (row) => {
  it(`tests row ${row}`, () => {
    ...
  })
}