首页 > 网络编程 > JavaScript > javascript技巧 > cypress e2e测试编写

cypress e2e测试编写注意点总结分析

2023-04-24 14:38:32 作者：今天比昨天更好哦

这篇文章主要为大家介绍了cypress e2e测试编写注意点总结分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

不要认为cypress是同步的

不要认为cypress是以同步的方式执行，不要用const、let、var等去定义一个变量，随后调用它

const a = cy.get('a');
cy.visit('https://example.cypress.io');
// 在这里有可能拿不到a，因为cy.get是异步操作，应该在before（）钩子函数中定义变量。
a.first().click();

尽量避免直接访问第三方

尽量避免直接访问第三方，因为第三方提供的访问API，返回的数据不可控，可能会发生改变；如果有这个需求，要使用cy.request()来调用第三方库的API。

登录需要注意的地方

登录在cypress上有些困难：许多OAuth服务商会运行A/B两套方案，导致登录屏幕动态更改，从而导致自动化测试变得困难。另外，OAuth服务商会根据你的访问次数和频率来判断是否是机器人访问，如果一旦被认定不是真人操作，就会导致不好的结果。

解决方案

token存根，并在测试前带上token返回第三方，从而达到欺骗第三方已经登录的目的

如果非要获取真实令牌，使用cy.request()并使用OAuth提供的API（这些API不常修改）
除了让测试代码绕过 OAuth 之外，您还可以向服务器寻求帮助。也许 OAuth 令牌所做的只是在数据库中生成一个用户。通常，OAuth仅在最初有用，并且您的服务器会与客户端建立自己的会话。如果是这种情况，请使用 cy.request（）直接从服务器获取会话并完全绕过提供程序。

避免测试用例之间的相互依赖

现在的test依赖于之前的test创造的环境，这是错误的写法。正确的写法应该是将之前test需要生成的结果写在before() 钩子中，每次都可以共享。

使用官方更加推荐的写法

比较以下两段代码的差异：

// 不好的写法
describe('my form', () => {
    beforeEach(() => {
        cy.visit('/users/new')
        cy.get('[data-testid="first-name"]').type('johnny')
    })
    it('has validation attr', () => {
        cy.get('[data-testid="first-name"]').should('have.attr', 'data-validation', 'required')
    })
    it('has active class', () => {
        cy.get('[data-testid="first-name"]').should('have.class', 'active')
    })
    it('has formatted first name', () => {
        cy.get('[data-testid="first-name"]').should('have.value', 'Johnny')
    })
})
// 推荐的写法
describe('my form', () => {
    beforeEach(() => {
        cy.visit('/users/new')
    })
    it('validates and formats first name', () => {
        cy.get('[data-testid="first-name"]').type('johnny').should('have.attr', 'data-validation', 'required').and('have.value', 'Johnny')
    })
})

为什么建议写成第二段代码那样？

集成测试和单元测试不同，你始终能知道失败的断言和位置在哪里。不用自己将其拆成一个个小的单元去测试哪段代码出问题。

另外，当写成一个个的测试用例时，在结束一个测试用例后，会重置测试条件，从而造成性能浪费。

避免写可能失败的代码

我们在做出数据请求后，希望等待数据响应后，再做接下来的操作。有可能会写成等待多少秒后再执行下一步的操作。但是，这里存在的问题是，

如果在既定的时间内并没有返回数据，就会导致测试失败。

正确的写法应该是给请求一个别名，并等待请求成功后，再做接下来的操作。

// 错误的写法
cy.intercept('GET', '/users', [{ name: 'Maggy' }, { name: 'Joan' }])
cy.get('#fetch').click()
cy.wait(4000) // 不要自己预计写死等待时间
cy.get('table tr').should('have.length', 2)
// 正确的写法
cy.intercept('GET', '/users', [{ name: 'Maggy' }, { name: 'Joan' }]).as('getUsers')
cy.get('#fetch').click()
cy.wait('@getUsers') // 正确等待数据请求回来
cy.get('table tr').should('have.length', 2)

以上就是cypress e2e测试编写注意点总结分析的详细内容，更多关于cypress e2e测试编写的资料请关注脚本之家其它相关文章！