Cypress知识整理

cypress实现UI自动化由几个部分组成：

1. testcase.cy.js文件(test cases文件),形如：

describe('Search in CSDN', {tag:['@regression', 'smoke']}, () => {
  before(() => {
    xxxx
  })

  beforeEach(() => {
    xxxx
  })

  it("login to CSDN", () => {
    xxxx
  }) 

  afterEach(() => {
    xxxx
  })

  after(()=> {
    xxxx
  })   
})

2. test.po.js文件(element定义，方法)，形如：

export class TestLoginPo {
  login = new LoginPage()
}

export class LoginPage {
  loginBtn =  '.login'
  
  clickLoginBtn() {
    cy.get(this.loginBtn).click()
  }
}

3. commands.js(customer commands), 参考博客Writing a Custom Cypress Command | Better world by better software (glebbahmutov.com)，形如：

Cypress.Commands.add('isBtnEnabledAndClick', (btnSelector, timeout = 10000, eq = 0) => {
  cy.get(btnSelector).eq(eq).as('btn').should('be.enabled', { timeout: timeout })
  cy.get('@btn').click({ timeout: timeout })
})

4. types.d.ts文件(add local type)，形如：

declare namespace Cypress {
    interface Chainable<Subject> {

    * @description User can use this method to validate if button is enabled and click it
    * @param {String} btnselector selector of the button
    
    isBtnEnabledAndClick(btnselector: string): Chainable<any>;
    }
}

5. request.js(api方法的封装)，形如：

  executeGet = (url, headers, body, parameter, timeout, failOnStatusCode = true) => {
    return this.executeRequest('GET', url, headers, body, parameter, timeout, failOnStatusCode)
  }
## 其他的同样

6. const.js和function.js(一些function和const的封装)，形如：

export function searchPayload(searchText) {
    return {
     searchField: `${searchText}`
    }
}

export const pageConst = {
    elementText: "Element"
}

7. qaEnv.json文件(存放环境信息)，形如：

{
    "env": {
        "api": "https//api.qa.com"
        "auth": "https//auth.qa.com"
    }
}

8. cypress.config文件, 参考官方文件 Configuration | Cypress Documentation