Cypress 12点击标签报错：TypeError: Cannot set properties of null (setting 'onclick')

1. 先修复最明显的方法名不匹配问题 #

你在测试脚本里调用了HomePage.flightButton()，但HomePage类里只定义了productsSearchBar()方法，这是直接导致报错的核心原因之一。先统一方法名并补充必要的状态校验：

修正后的HomePage.js #

export default class HomePage {
    static open() {
        cy.visit('https://phptravels.net/');
        // 增加页面加载完成的断言，确保页面核心元素就绪
        cy.url().should('include', 'phptravels.net');
        cy.get('nav.navbar').should('be.visible');
    }

    // 把方法名改为测试中调用的flightButton，同时增加元素可交互性校验
    static flightButton() {
        return cy.get('button[data-bs-target="#tab-flights"]', {
            timeout: 50000,
        }).should('be.visible').should('not.be.disabled');
    }
}

修正后的test.cy.js #

import HomePage from '../page-objects/pages/HomePage';

describe('Regression Test', () => {
    beforeEach(() => {
        HomePage.open();
    });

    it('should search for a product', () => {
        // 调用正确方法并执行点击，同时增加切换成功的断言
        HomePage.flightButton().click();
        cy.get('#tab-flights').should('be.visible');
    });
});

2. 排查其他可能导致点击失败的原因 #

如果修正方法名后仍报错，按以下方向排查：

• 元素是否在iframe中：打开浏览器开发者工具，确认目标按钮不在任何iframe内。如果在，需先切换到对应iframe再定位元素
• 元素是否被遮挡：检查按钮是否被弹窗、导航栏或其他元素覆盖，可尝试先滚动到元素：HomePage.flightButton().scrollIntoView().click()
• 选择器稳定性：如果按钮是动态渲染的，改用更稳定的层级选择器，比如结合父容器定位：cy.get('.nav-tabs').find('button[data-bs-target="#tab-flights"]')
• 页面异步加载：若页面存在异步请求，可添加对关键请求的等待：cy.intercept('GET', '/api/*').as('pageLoad'); cy.wait('@pageLoad')

3. 实用调试技巧 #

• 用cy.pause()在点击前暂停测试，手动检查元素的可见性与可交互性
• 用cy.get('button[data-bs-target="#tab-flights"]').debug()查看元素的DOM属性状态
• 查看Cypress控制台的具体错误信息，区分是「元素未找到」还是「元素不可交互」

内容的提问来源于stack exchange，提问作者Iván