正文

Cypress 调用其他 JavaScript 方法的方法如下： 1. **直接调用：** 如果你想在 Cypress 测试中调用一个全局的 JavaScript 方法，你可以直接这样做： ```javascript cy.visit('https://example.com'); cy.window().eval(() => {

/0 浏览量
0817

在编写 Cypress 测试时，我们经常需要调用页面上的 JavaScript 方法来模拟用户行为或验证某些功能。Cypress 提供了多种方法来调用这些方法，以下是一些常用的技巧和示例。

直接调用全局方法

当你在 Cypress 测试中需要调用一个全局的 JavaScript 方法时，可以直接使用 cy.window().eval() 方法。这种方法允许你在 Cypress 的上下文中执行 JavaScript 代码。

cy.visit('https://example.com');
cy.window().eval(() => {
  myGlobalMethod();
});

在这个例子中，myGlobalMethod() 将在当前打开的窗口上下文中执行。

模拟或拦截 API 调用

使用 cy.route 方法，你可以模拟或拦截一个 API 调用。这对于测试依赖于外部服务的应用程序非常有用。

cy.route('GET', '/api/data').as('getData');
cy.visit('https://example.com');
cy.wait('@getData').then((xhr) => {
  // 这里的 xhr 对象包含请求的详细信息
  // 你可以在这里调用其他 JavaScript 方法，并处理响应
});

在这个例子中，我们模拟了一个 GET 请求到 /api/data，并在请求完成后执行一些操作。

模拟方法以验证调用

cy.stub 方法允许你模拟一个方法，以便在测试中验证它是否被调用。

cy.stub(myObject, 'myMethod').returns('mocked response');

然后，在测试中，你可以调用 myObject.myMethod()，它将返回 'mocked response' 而不是实际执行。

与页面元素交互

如果你需要与页面上的元素交互，然后调用一个元素上的方法，可以使用 cy.focused 或 cy.get。

cy.get('.some-element').then(($el) => {
  $el.myMethod();
});

在这个例子中，我们首先获取页面上的元素，然后在该元素的上下文中调用 myMethod()。

在自定义命令或函数中调用

你还可以在自定义 Cypress 命令或函数中调用方法。

Cypress.Commands.add('myCustomCommand', (callback) => {
  // 执行一些操作，然后调用回调中的方法
  callback();
});

it('uses my custom command', () => {
  cy.myCustomCommand(() => {
    myMethod();
  });
});

在这个例子中，我们创建了一个自定义命令 myCustomCommand，它接受一个回调函数，并在回调中调用 myMethod()。

总结

Cypress 提供了多种方法来调用 JavaScript 方法，这些方法可以让你在测试中模拟用户行为、验证功能，并确保应用程序按预期工作。通过使用这些方法，你可以编写更加灵活和强大的 Cypress 测试。

-- 展开阅读全文 --