Cypress 是一种流行的前端自动化测试框架，它可以提供快速、可靠和高效的测试结果。Cypress 可以测试 Web 应用程序的各个方面，包括 UI、性能、安全和可访问性。本文将重点介绍如何使用 Cypress 测试框架对 404 页面进行测试。
什么是 404 页面？
404 页面是指当用户试图访问网站中不存在的页面时，服务器返回的 HTTP 状态码为 404 的网页。404 页面可以被称为“找不到页面”、“未找到”、“404 错误”等。当用户进入网站时，如果遇到 404 页面，这可能会影响用户体验。因此，404 页面的处理非常重要。
Cypress 测试框架如何测试 404 页面？
在测试 404 页面时，我们需要确保当用户访问不存在的页面时，服务器返回的响应是 404 状态码，而不是其他状态码（例如 200、302 等）。在 Cypress 中，我们可以使用 cy.request () 命令模拟发送请求并检查响应状态码。
首先，我们需要创建一个测试用例，在该用例中，我们使用 cy.request () 命令模拟发送到不存在页面的请求并检查响应状态码是否为 404。以下是一个示例代码：
describe('测试 404 页面', () => {
it('访问不存在页面，确保服务器返回 404 状态码', () => {
cy.request({
url: '/not-found',
failOnStatusCode: false
}).then((response) => {
expect(response.status).to.eq(404)
})
})
})在上面的示例代码中，我们使用 cy.request() 命令发送 GET 请求到 "/not-found"页面。设置 failOnStatusCode 属性为 false，以确保即使服务器返回非 200 状态码，测试也不会中断。然后通过断言检查响应状态码是否为 404。
Cypress 如何检查 404 页面的 UI？
尽管响应状态码的检查非常重要，但我们还需要确保用户在遇到 404 页面时可以获得良好的用户体验。在 Cypress 中，我们可以使用访问器和命令组合，确保 404 页面正在显示到用户。以下是一个示例代码：
describe('测试 404 页面', () => {
it('访问不存在页面，确保服务器返回 404 状态码', () => {
cy.request({
url: '/not-found',
failOnStatusCode: false
})
cy.getByTestId('404-page').should('be.visible')
})
})在这个示例代码中，我们在发送 GET 请求后，使用 getByTestId 方法获取 404 页面的元素，并检查该元素是否可见。
总结
测试 404 页面可以提高您的 Web 应用程序的质量和用户体验。在 Cypress 中，我们可以使用命令和访问器组合测试 404 页面的响应状态码和 UI。我们希望本文对您有所帮助，能够使用 Cypress 测试框架对 404 页面进行测试。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65ab6d9aadd4f0e0ff513257