덜 알려진 Cypress.io 트릭

Cypress.io는 매우 놀랍습니다. 아직 사용하지 않았고 바로 시작해야 하는 경우 Udemy에서 매우 빠른 직진 과정을 추천합니다. 그것은 Cypress test automation for people in a hurry이라고 불리며 정확히 그 것입니다. 평균 비디오 길이는 2분이며 더 많은 것을 배우는 데 도움이 되는 실용적인 연습입니다.

내 과정을 만들고 Cypress를 직접 사용하면서 종종 문서화되지 않았거나 널리 사용되지 않는 기능을 발견하여 도움이 될 수 있습니다. 그들에게 뛰어 들자.

라우팅 번호가 매겨진 경로

.route() 명령을 사용하여 경로를 일치시킬 때 와일드카드를 사용하여 필요한 정확한 API 호출을 계산할 수 있습니다. 그러나 때로는 충분하지 않습니다. 앱은 정확히 동일한 엔드포인트를 두 번 호출할 수 있습니다. 이러한 유형의 상황에 대한 테스트를 작성하려면 다음과 같이 배열을 사용하여 둘 다 선택할 수 있습니다.

cy
  .server()
  .route('POST', '/todos')
  .as('createTodo')

cy
  .visit('/')

// create 2 todos via UI using custom command
cy
  .addTodo()
  .addTodo()

cy
  .wait(['@createTodo', '@createTodo']).then( todos => {

    expect(todos[0].status).to.eq(201)
    expect(todos[1].status).to.eq(201)

  })

배열을 사용하는 대신 라우팅된 네트워크 요청의 두 번째 인스턴스만 선택할 수 있습니다. 다음과 같이 별칭 자체에 색인 번호를 추가하면 됩니다.

cy
  .server()
  .route('POST', '/todos')
  .as('createTodo')

cy
  .visit('/')

// create 2 todos via UI using custom command
cy
  .addTodo()
  .addTodo() // we will wait for a request that happens after this action

cy
  .wait('@createTodo.2').then( todos => {
    expect(todos.status).to.eq(201)
  })

Pro tip: did you know Cypress recently released experimental full-layer network stubbing? Besides xhr requests, you can now route (some) images, static files and fetch requests!

앨리어싱 DOM 요소

네트워크 통화 라우팅은 Cypress의 가장 강력한 기능 중 하나입니다. 별칭을 지정하려면 .as() 명령을 사용한 다음 .wait() 또는 .get() 명령을 사용하여 해당 네트워크 요청에 대한 테스트를 작성할 수 있습니다.

동일한 방식으로 DOM 요소에 별칭을 지정한 다음 .get() 명령을 사용하여 나중에 테스트에서 해당 요소를 선택할 수 있습니다. 이는 같은 수준에 항목 목록이 있을 때 특히 유용합니다. 예를 들어 cypress-drag-drop 플러그인을 사용하여 요소를 다른 요소로 드래그할 때입니다.

cy
  .get('.todo')
  .eq(2)
  .as('third')

cy
  .get('.todo')
  .eq(3)
  .as('fourth')

cy
  .get('@third')
  .drag('@fourth')

.log() 메시지의 사용자 지정 형식 지정

엔드투엔드 테스트는 사용자 스토리로 작성해야 한다고 생각합니다. 그렇기 때문에 실패한 테스트에서 이야기가 중단된 위치를 이해하는 것이 중요합니다. 나는 한동안 ways to create a custom error message을 가지고 놀았습니다. 주로 스크린샷에서 실패한 테스트를 디버깅하거나 기본적으로 엔드 투 엔드 테스트에 캡션을 추가할 때 많은 도움이 되기 때문입니다. 마크다운 서식 구문을 사용하여 이러한 메시지를 사용자 지정할 수 있는 방법이 있습니다.

cy.log('normal')
cy.log('**bold**')
cy.log('_italic_')
cy.log('[blue](<http://example.com>)')

사용자 지정 오류 메시지

사용자 지정 .log() 메시지 외에도 오류 메시지도 사용자 지정할 수 있습니다. 나는 expect() 함수가 실제로 실패 시 오류 메시지가 될 두 번째 매개변수를 취할 수 있다는 사실을 알게 되어 기뻤습니다.

cy
  .get('.todo')
  .then( todo => {
    expect(todo, 'Milk was not found').to.contain.text('Buy milk')
})

보너스 팁: Cypress GUI에서 DevTools가 자동으로 열리도록 합니다.

필립 Hric










테스트를 작성할 때 devtools를 열지 않고 Chrome을 사용한 적이 없는 것 같습니다. 매번 키보드 단축키를 누르는 대신 plugins/index.js 파일을 통해 자동으로 열리게 했습니다. 팁


오후 18:04 - 2020년 3월 19일





5

33