Cypress POM 实践：正确实例化类以避免 TypeError

// homePageTest.cy.js
import HomePage from '../Hompage.js'; // 假设这里导入的是类定义

it("some test", () => {
    cy.fixture("jsonValues").then((data) => {
        // 错误：直接在导入的类定义上调用方法
        // HomePage 此时是一个类，而不是类的实例
        HomePage.populateDataBasedOnJsonValues(data); 
    });
});

// homepage.js
class HomePage {
    _getcheckBox(question) {
        // 这里的 this.get 假设是 cy.get 的误写，或期望有一个内部的 get 方法
        // 正确的 Cypress 做法应直接使用 cy.get
        return cy.get(`div[class$='checkbox-component-${question}'] > label > input`);
    }

    populateDataBasedOnJsonValues(answers) {
        for (let key in answers) {
            // 错误：在类内部调用其他方法时，必须使用 'this' 关键字
            // const question = _getcheckBox(answers[key]); // 这会导致 ReferenceError 或其他问题
            const questionElement = this._getcheckBox(answers[key]); // 正确
            questionElement.click();
        }
    }
}
export default HomePage;

// homePageTest.cy.js
import HomePage from '../Hompage.js';

// 在测试套件或测试用例开始时，创建 HomePage 类的一个实例
const homePage = new HomePage(); // 关键：实例化 HomePage 类

it("some test", () => {
    cy.fixture("jsonValues").then((data) => {
        // 现在 homePage 是 HomePage 类的一个实例，可以正常调用其方法
        homePage.populateDataBasedOnJsonValues(data);
    });
});

// homepage.js
class HomePage {
    // 确保 _getcheckBox 返回 Cypress 命令链
    _getcheckBox(question) {
        return cy.get(`div[class$='checkbox-component-${question}'] > label > input`);
    }

    populateDataBasedOnJsonValues(answers) {
        for (let key in answers) {
            // 正确：使用 'this' 关键字调用当前实例的 _getcheckBox 方法
            const questionElement = this._getcheckBox(answers[key]);
            questionElement.click();
        }
    }
}
export default HomePage;

// cypress/page-objects/homepage.js
class HomePage {
    // 私有辅助方法，用于获取复选框元素
    _getcheckBox(question) {
        // 使用模板字符串构建选择器，并返回 Cypress 命令链
        return cy.get(`div[class$='checkbox-component-${question}'] > label > input`);
    }

    // 根据 JSON 数据填充页面上的复选框
    populateDataBasedOnJsonValues(answers) {
        for (let key in answers) {
            // 确保使用 'this' 关键字调用当前实例的内部方法
            const questionElement = this._getcheckBox(answers[key]);
            questionElement.click();
        }
    }
}
export default HomePage;

// cypress/e2e/homePageTest.cy.js
import HomePage from '../page-objects/homepage.js'; // 确保路径正确

// 在测试文件顶部或 beforeEach 钩子中实例化 Page Object
const homePage = new HomePage(); // 实例化 HomePage 类

describe('Homepage Checkbox Tests', () => {
    beforeEach(() => {
        // 可选：在每个测试前访问页面
        cy.visit('/'); 
    });

    it("should populate checkboxes based on json values", () => {
        cy.fixture("jsonValues").then((data) => {
            // 调用实例方法，传入从 fixture 加载的数据
            homePage.populateDataBasedOnJsonValues(data);
        });
        // 添加断言以验证操作是否成功
        // 例如：
        // cy.get('input[type="checkbox"]:checked').should('have.length', Object.keys(data).length);
    });
});

// cypress/fixtures/jsonValues.json
{
    "question1": "optionA",
    "question2": "optionB",
    "question3": "optionC"
}