如何用Cypress编写测试用例验证输入框为空时点击按钮无响应

场景说明 #

我有一个“Go Google”按钮和一个输入框：

• 当输入框中有内容时，点击按钮会打开新标签页跳转至目标网站
• 若输入框为空，点击按钮则无任何反应

对应的React组件代码如下：

import "./styles.css";
import React, { useState } from "react";

export default function App() {
  const [input, setInput] = useState("");

  const onButtonClick = () => {
    if (input !== "") {
      window.open("www.google.com");
    }
  };

  return (
    <div className="App">
      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <button onClick={onButtonClick}>Go Google</button>
    </div>
  );
}

测试用例编写 #

要验证输入框为空时点击按钮无反应的场景，可编写如下Cypress测试用例：

// cypress/e2e/app.spec.cy.js
describe('输入框为空时按钮行为验证', () => {
  it('输入框为空，点击按钮后不触发跳转', () => {
    // 访问应用页面（根据实际项目调整baseUrl或访问路径）
    cy.visit('/');

    // 存根window.open方法，用于追踪是否被调用
    const windowOpenStub = cy.stub(window, 'open').as('windowOpen');

    // 确认输入框初始为空
    cy.get('input').should('have.value', '');

    // 点击"Go Google"按钮
    cy.get('button').contains('Go Google').click();

    // 断言window.open从未被调用
    cy.get('@windowOpen').should('not.be.called');
  });
});

关键说明 #

• 使用cy.stub存根window.open，可以精准追踪该方法的调用情况，避免实际打开新标签页干扰测试流程
• 先断言输入框为空，确保测试场景的初始状态符合预期
• 最后通过断言存根方法未被调用，验证按钮点击后无跳转行为

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