Cypress 之 URL访问

Cypress visit 命令详解
本文详细介绍了Cypress中visit命令的使用方法,包括其作用、语法、参数及选项,如设置超时时间、添加身份验证、发送POST请求等,并提供了多个应用实例。

 

visit

 

作用:

访问一个远程URL。

(建议:使用前设置 baseUrl)

语法:

cy.visit(url)
cy.visit(url, options)
cy.visit(options)

使用:

cy.visit('http://localhost:3000')    // 产生远程页面的窗口

参数:

 > url (String)

要访问的URL。(如果你设置了baseUrl,将使用baseUrl配置的url作为前缀

 > options (Object)

传入一个options对象来控制此方法。

Options:

选项

默认

描述

url

null

要访问的URL,与url参数的行为相同。

method

GET

在访问中使用的HTTP方法,可以是GETPOST

body

null

POST请求一起发送的可选主体。

如果它是一个字符串,将原封不动地去传递。

如果它是一个对象,将被编码为字符串并与消息头(Content-Type: application/x-www-urlencoded)一起发送。  

headers

{}

将HTTP标头名称映射到要与请求一起发送的值的对象。

注意: headers仅针对初始cy.visit()请求发送,而不是针对后续所有请求发送。

log

true

在命令日志中显示该命令

auth

null

添加基本​​授权标头

failOnStatusCode

true

当响应码不是2xx3xx时是否报错

onBeforeLoad

function

在页面加载了所有资源之前调用

onLoad

function

在你的页面触发其加载事件后调用

retryOnStatusCodeFailure  

false

当状态代码错误时是否自动重试

retryOnNetworkFailure

true

当网络错误时是否自动重试

timeout

pageLoadTimeout  

页面加载超时时间,单位毫秒。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

例子:

//设置超时
cy.visit('/index.html', { timeout: 30000 })

//添加身份验证(1)
cy.visit('https://www.acme.com/', {
  auth: {
    username: 'wile',
    password: 'coyote'
  }
})

//添加身份验证(2)
cy.visit('https://wile:coyote@www.acme.com')

//页面加载完所有资源后调用函数
cy.visit('http://localhost:3000/#dashboard', {
  onBeforeLoad: (contentWindow) => {
    // contentWindow是远程页面的窗口对象
  }
})

//触发加载事件后调用函数
cy.visit('http://localhost:3000/#/users', {
  onLoad: (contentWindow) => {
    // contentWindow是远程页面的窗口对象
    if (contentWindow.angular) {
      // 一些事件
    }
  }
})

//发送post请求
cy.visit({
  url: 'http://localhost:3000/cgi-bin/newsletterSignup',
  method: 'POST',
  body: {
    name: 'George P. Burdell',
    email: 'burdell@microsoft.com'
  }
})

 

 

转载于:https://www.cnblogs.com/leozhanggg/p/10980791.html

### Cypress 测试框架使用指南 #### 安装 Cypress 为了开始使用 Cypress,在项目路径下执行命令可以安装此工具作为开发依赖项。这可以通过 `yarn` 实现,具体操作如下所示[^2]: ```bash cd /your/project/path yarn add cypress --dev ``` #### 认识 Cypress 文档资源 Cypress Documentation 提供了一个详尽的资料库,其中包含了 Guides、API 参考、实例代码、Cypress Cloud 和常见问题解答等内容。这些材料有助于理解如何有效地应用 Cypress 对前端应用程序实施测试。访问官方网址 [https://docs.cypress.io](https://docs.cypress.io),可以获得互动性强的学习体验[^1]。 #### 创建与编写测试案例 当准备就绪要编写第一个测试脚本时,需知 Cypress 的测试用例是以 JavaScript 文件形式存在的。建议新建一个专门用于存储测试文件的目录,并在此处建立如 `example.spec.js` 类似的文件名来承载具体的测试逻辑。利用 Cypress 提供的一系列 API 函数即可完成测试场景的设计和实现[^4]: ```javascript describe('My First Test', function() { it('visits the kitchen sink', function() { cy.visit('https://example.com') cy.contains('type').click() cy.url().should('include', '/commands/actions') cy.get('.action-email') .type('[email protected]') .should('have.value', '[email protected]') }) }) ``` #### 探索更多功能特性 除了上述基础部分外,《Cypress 测试框架使用手册》还深入介绍了项目的内部架构及其核心组成部分,比如配置选项等重要细节,使得使用者能更快地上手并充分发挥出这一强大工具的优势[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值