Cypress를 사용하여 텍스트로 요소를 식별하는 방법

오늘의 "Pinchs of Cypress"에서는 텍스트로 요소를 식별하는 방법을 배웁니다.

자동화된 테스트 스크립트를 생성할 때 고유한 CSS 선택기로 항상 요소를 식별할 수는 없습니다.

그러나 우리가 그들의 텍스트로 그들을 식별할 수 있다면 어떨까요?

세 가지 예를 보여드리겠습니다.

첫 번째 예에서 요소를 식별하는 텍스트가 있는 한 요소의 종류는 중요하지 않습니다.

Such an approach is helpful in cases where we know that only one element on the screen will have the text we expect. Otherwise, we run the risk of identifying the wrong element.

구현은 매우 간단합니다.

cy.contains('Any text')

예를 들어 원하는 경우 요소가 표시되는지 확인할 수도 있습니다.

cy.contains('Any text').should('be.visible')

두 번째 예에서는 텍스트가 특정 HTML 요소에 있다는 것을 알고 있습니다.

요소가 다음과 같다고 하자.

<a href="https://udemy.com/user/walmyr/">Courses</a>

이 경우 anchor 요소에 'Courses'라는 텍스트가 포함되어 있고 볼 수 있음을 식별하려고 합니다.

구현은 다음과 같습니다.

cy.get('a:contains(Courses)').should('be.visible')

첫 번째 예와 달리 이 경우에는 cy.get() 을 사용합니다. 그러나 CSS 선택기를 전달하는 대신 jQuery's :contains functionality 과 함께 선택기를 제공합니다.

그리고 'Courses'라는 텍스트가 있는 anchor( <a> ) 유형의 요소가 있는 경우 해당 요소가 표시된다는 확인을 통과해야 합니다.

마지막 예제에서는 cy.contains() 사용으로 돌아가 이전 예제에서 동일한 요소를 식별하고 이 요소가 표시되는지 확인합니다.

cy.contains('a', 'Courses').should('be.visible')

보시다시피 cy.contains 를 사용하면 선택기를 첫 번째 인수로, 텍스트를 두 번째 인수로 전달할 수 있으므로 요소에 올바른 텍스트가 있고 텍스트가 적절한 요소에 포함되도록 할 수 있습니다.

그게 다야!


마음에 드셨나요?

귀하의 피드백을 기다리겠습니다!


이 게시물은 원래 Talking About Testing 블로그에 포르투갈어로 게시되었습니다.


Cypress를 사용한 테스트 자동화에 대해 배우고 싶습니까? Udemy에서 내 온라인 과정을 알아보십시오.