在这一部分的结尾，您将精通为您的Cypress.io测试套件编写自定义功能，为高级测试自动化铺平了道路。所以，让我们开始！

了解Cypress.io中的自定义功能

在我们研究代码之前，让我们首先了解cypress.io的上下文中的自定义功能。

cypress.io提供了许多内置命令来与Web元素进行交互，但在某些情况下，您需要执行更复杂的操作或编写自定义断言。幸运的是，cypress.io允许您创建自己的自定义功能，以扩展cypress.io的功能。它们可用于执行不受cypress.io本地支持的特定任务，或简化代码并使其更可读。

在cypress.io中编写自定义功能[示例1]

现在我们了解了什么是自定义功能，让我们继续写一个。在此示例中，我们将创建一个自定义功能来生成随机用户名。

function generateRandomUsername() {
  let text = "";
  let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

  for (let i = 0; i < 8; i++) {
    text += possible.charAt(Math.floor(Math.random() * possible.length));
  }

  return "user_" + text;
}

让我们分解上面的代码。 generateRandomUsername函数不含参数，并返回字符串值。它首先声明两个变量text和possible。

text最初是一个空字符串，possible包含可用于生成随机字符串的所有可能字符。

接下来，使用for循环迭代8次，在每次迭代中，使用Math.random()函数从possible字符串中选择一个随机字符。然后将选定的字符附加到文本字符串上。

最后，该函数通过将text字符串与前缀“ user_”相连。

在测试用例中使用自定义函数[示例1]

现在我们拥有自定义功能，让我们在测试用例中使用它。在此示例中，我们将使用自定义功能生成随机用户名并填写注册表格。

it('registers a new user with a random username', () => {
  const username = generateRandomUsername();

  cy.visit('https://example.com/register')
  cy.get('#username').type(username)
  cy.get('#email').type('test@example.com')
  cy.get('#password').type('password123')
  cy.get('#submit').click()

  cy.contains('Registration successful!')
})

上面的测试用例首先使用我们的自定义函数generateRandomUsername()生成随机用户名。然后，我们访问注册页面，并使用cy.get()命令在页面上选择#username，#email，#password和#submit元素。我们使用测试数据填写表单字段，然后单击“提交”按钮。

最后，我们断言注册是通过检查成功消息的存在而成功的。

在cypress.io [示例2]中编写自定义功能

让您说您需要检查页面上的特定元素是否可见并且具有一定尺寸。您可以编写一个封装此逻辑的自定义功能：

Cypress.Commands.add('assertElementIsVisibleAndHasSize', (selector, width, height) => {
  cy.get(selector).should('be.visible').and(($el) => {
    expect($el.width()).to.equal(width)
    expect($el.height()).to.equal(height)
  })
})

在这里，我们使用Cypress.Commands.add()方法定义了自定义命令。我们的命令采用三个参数：元素的选择器，预期宽度和预期高度。然后，我们使用cy.get()命令选择元素并链条.should()方法以检查其可见。最后，我们使用.and()方法对元素的宽度和高度执行其他断言。

现在，您可以像任何其他cypress.io命令：
一样在测试中使用此自定义命令

it('Checks the size of a visible element', () => {
  cy.visit('https://www.example.com')
  cy.assertElementIsVisibleAndHasSize('.my-element', 100, 200)
})

摘要：在这里，我们看到了如何在cypress.io中编写自定义功能以扩展框架的功能并处理复杂的测试自动化方案。我们提供了对每条代码的详细说明，它与基本测试案例示例的不同以及如何克服常见并发症。通过使用自定义功能，您可以使测试代码更可读，可维护和可重复使用。自定义功能可以帮助您简化复杂的测试用例，处理动态数据并减少代码重复。

以前的部分：Part 1，Part 2，Part 3

如果您喜欢这个，请单击â€，以便其他人也会注意到此处。

现实世界的例子

我们在这一系列高级和复杂主题中提供的示例对于学习如何处理iframe，网络固执，承诺解决和自定义功能很有用，但它们是有些人为的。要真正掌握这些技术，重要的是要了解如何在现实世界中应用它们。

例如，让您说您对使用IFRAME的电子商务网站进行测试来显示第三方供应商的产品信息。您可能需要测试iFrame中显示正确的产品信息，并且用户可以与产品选项进行交互并将产品添加到其购物车中。

同样，可以说您重新测试了一个社交媒体应用程序，该应用程序严重依赖网络请求以显示用户内容。您可能需要使用网络固执来模拟慢速网络连接或错误响应，并测试应用程序如何处理这些情况。

最后，可以说您要重新测试一个需要与Web元素进行复杂交互的财务应用程序。您可能需要编写自定义功能来执行计算或验证某些财务数据正在正确显示。

通过将现实世界的方案纳入您的测试自动化策略，您可以确保测试在捕获现实世界问题方面具有相关性和有效性。请记住，这些先进的技术只是您的测试中的工具 - 关键是明智而战略性地使用它们来实现您的测试目标。

结论性言论

在这一系列主题中，我们探索了一些用于cypress.io测试自动化的高级技术，包括处理iframes，网络固执，承诺解决和自定义功能。我们提供了代码示例，并详细解释了每个概念，我们还强调了将现实世界中的场景纳入您的测试策略的重要性。

通过掌握这些技术，您将能够编写更有效和有效的自动化测试，并在其进行生产之前捕获错误。凭借Cypress.io强大的测试功能和新发现的技能，您将可以将测试游戏提升到一个新的水平。快乐测试！