TestCafe如何读取表格列数据并在单spec所有测试函数间共享

要实现表格数据在同一spec所有测试用例中共享，需要解决两个核心问题：一是要在页面DOM加载完成、登录完成的正确时机执行数据读取；二是要将读取到的序列化数据存入TestCafe支持的全局共享上下文，同时将读取逻辑封装到页面对象模型（POM）实现复用。

第一步：修正POM中的表格数据读取方法 #

正确封装表格数据读取逻辑，注意所有Selector的动态属性（count、innerText等）都需要单独await，不能await Selector实例后再访问属性。

import { Selector } from "testcafe";

class TablePage{
    constructor() {
        this.searchInput = Selector('#searchInput');
        // 工单编号列选择器，可根据实际需求替换为其他列的选择器
        this.woNumber = Selector('.wo-number-column');
        // 表格行选择器
        this.tableRow = Selector('.table-row-class');
    };

    /**
     * 读取指定列的所有单元格文本内容
     * @param {Selector} columnSelector 目标列的Selector实例
     * @returns {Object} 包含行数量和单元格文本数组的对象
     */
    async getColumnTextList(columnSelector) {
        const rowCount = await columnSelector.count;
        const cellData = [];

        for (let i = 0; i < rowCount; i++) {
            const text = await columnSelector.nth(i).innerText;
            cellData.push(text);
        }

        return {
            rowCount,
            cellData
        }
    }

    // 原有搜索验证方法保留
    async validateSearchResults(selector, searchText) {
        await t
            .typeText(this.searchInput, searchText)
            .pressKey('enter');

        const rowCount = await this.tableRow.count;
        let searchResults = []

        for (let i = 0; i < rowCount; i++) {
            let text = await selector.nth(i).innerText;

            searchResults.push(text);
            await t.expect(searchResults[i]).contains(searchText);
        }
    };

}

export default TablePage;

第二步：在spec中通过fixture上下文共享数据 #

利用TestCafe的fixtureCtx实现fixture内所有测试用例的数据共享，在beforeEach钩子中判断数据是否已读取，避免重复执行读取逻辑：

import { sAdmin } from "..authentication";
import TablePage from "../TablePage";

const tablePage = new TablePage();

fixture `A fixture`
    .page`https://subdomain.example.com/#/table`
    .beforeEach( async t => {
        await t
            .resizeWindow(1284, 722)
            .useRole(sAdmin);
        
        // 仅在第一个测试执行前读取一次表格数据，后续测试直接复用
        if (!t.fixtureCtx.tableData) {
            // 读取工单编号列的所有数据
            t.fixtureCtx.tableData = await tablePage.getColumnTextList(tablePage.woNumber);
        }
    });

// 测试用例1：验证初始表格数据
test(`Verify initial table data`, async t => {
    const { rowCount, cellData } = t.fixtureCtx.tableData;
    console.log('shared tableCount', rowCount);
    console.log('shared cellData', cellData);
    // 此处可添加自定义断言逻辑
});

// 测试用例2：验证搜索功能，可直接复用初始表格数据做对比
test(`Verify search function`, async t => {
    const { cellData: initialData } = t.fixtureCtx.tableData;
    // 拿初始数据里的第一个值做搜索关键词
    const searchKey = initialData[0];
    await tablePage.validateSearchResults(tablePage.woNumber, searchKey);
});

常见问题说明 #

• 不要在fixture的.before钩子中执行DOM相关操作：该钩子在测试页面加载前执行，此时还未渲染DOM，无法获取Selector对应元素，只会返回undefined或异常对象。
• 不要直接await Selector实例后访问其动态属性：Selector的count、innerText等属性本身就是Promise对象，需要单独await，如await selector.count，而不是(await selector).count，后者会返回DOM节点状态对象的对应属性，无法得到预期值。

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