Cypress를 사용한 인터넷: Heroku의 'The Internet' Playground의 실제 시나리오

최근 chatGPT에 가서 좋은 자동화 연습이 무엇인지 물었습니다. 잠시 후 동일한 시스템에서 작업하거나 특정 유형의 사용자 흐름에 대한 자동화를 제공하면 우리는 잊어버리게 될 수도 있어서 연습할 수 있는 사이트를 몇 군데 물어보다가 인터넷을 찾았습니다.
그리고 사이트가 초보적으로 보일 수도 있지만 여전히 일부 자동화를 시도할 수 있는 장소를 제공하며 현재로서는 이것이 제가 필요한 전부였습니다. 저는 시간을 투자해 Cypress를 사용하여 몇 가지 고전적인 웹 문제를 해결했습니다.
그럼 더 이상 고민하지 말고 마술처럼 왔다 갔다 하는 버튼, 이상한 드래그 앤 드롭, 파일 관련 자동화, 빠른 Shadow DOM 작업 등 모든 것을 다루는 제가 자동화한 몇 가지 시나리오를 살펴보겠습니다.

1. 드래그 앤 드롭: 드래그 앤 드롭을 자동화해 본 적이 있다면 그것이 보기만큼 간단하지 않다는 것을 아실 것입니다. Cypress는 특정 상호 작용을 기본적으로 지원하지만(저도 그렇게 해 보았습니다. ㅋㅋㅋ) 바로 여기서 드래그 앤 드롭 테스트를 수행하려면 여전히 창의성이 필요합니다.

이 경우에는 Trigger('mousedown'), Trigger('dragover') 및 Trigger('mouseup')를 사용하여 사용자 정의 dragAndDrop 명령을 실험했습니다. 이 사이트에 기능이 구현된 방식으로 인해 이 테스트가 작동하도록 하려면 좀 더 자세히 살펴보아야 했지만 대부분의 최신 앱에서는 Cypress 플러그인이면 충분할 것 같습니다(고맙게도).

1. 요소 추가/제거:

이 연습의 '요소 추가' 버튼은 이론적으로는 간단하지만 이 놀이터가 때때로 여러분의 기대를 어지럽히려고 하는 방식이 재밌습니다. 하하. 한 번 클릭하면... 삭제 버튼이 나타납니다(아주 직관적이지는 않지만 그냥 굴려야 합니다). 비결은 테스트에서 안정적이고 반복 가능한 방식으로 추가-제거 댄스를 처리하는지 확인하는 것입니다. Cypress를 사용하면 버튼이 나타나는지 확인하고 몇 가지를 더 추가한 다음 순서에 문제가 없는지 확인하면서 하나씩 제거합니다.

프로 팁:
나타나고 사라지는 요소를 추적하는 것은 까다로울 수 있지만 Cypress의 .should('exist') 및 .should('not.exist') 어설션은 이를 잘 처리합니다. 게다가 매번 멋진 시각적 확인을 받을 수 있습니다.

1. 동적 콘텐츠:

이 기사의 예 중 가장 단순한 예라고 생각하지만 여전히 흥미로울 수 있습니다. 콘텐츠가 변경되더라도 콘텐츠의 형식이 일정하게 유지되는지 확인하는 테스트를 만드는 것이 아이디어였습니다. 항상 변합니다... 그래도 학습에는 유용할 수 있습니다.

Cypress는 실제 콘텐츠에 대해 너무 까다롭게 생각하지 않고 예상대로 요소 로드를 확인할 수 있으므로 테스트 탄력성을 유지할 수 있습니다.

1. 동적 제어:

이 경우 확인란 및 버튼과 같은 컨트롤은 사용자 상호 작용에 따라 나타나거나 사라집니다. 일부는 로딩 표시가 사라질 때까지 기다려야 합니다. 여기서는 Cypress의 cy.wait 및 .should('be.visible')이 핵심입니다.

빠른 팁:

하드코딩된 대기 대신 .should('exist') 및 .should('be.disabled')와 같은 어설션을 사용하여 페이지 상태에 반응하세요. 이를 통해 테스트가 더욱 강력해지고 적응력이 높아집니다.

1. 파일 다운로드:

파일을 다운로드하는 것은 실제로 일어난 일이라는 것을 입증하기 전까지는 간단해 보일 수 있습니다. Cypress에는 파일이 실제로 다운로드되었는지 확인하기 위해 할 수 있는 여러 가지 작업이 있습니다.

다운로드가 완료되었는지 확인하기 위해 다양한 작업을 수행할 수 있습니다. 이 애플리케이션의 경우 링크를 클릭한 후 다운로드 폴더에 파일이 있는지 확인했습니다. 매우 간단했습니다. 파일이 있으면 테스트가 자동으로 통과됩니다. 예를 들어 cy.intercept를 사용하여 다운로드 요청이 실행되었는지 확인하는 등의 다른 전략을 적용할 수 있습니다.

1. 파일 업로드: 파일 다운로드와 마찬가지로 Cypress를 사용하면 파일 업로드도 놀라울 정도로 원활합니다.

이러한 유형의 시나리오에서는 cypress-file-upload와 같은 것을 사용할 수 있습니다
매우 훌륭하고 유용한 플러그인입니다. 앱에서 파일이 처리되는지 확인하세요.

제 예에서는 .selectFile 명령을 통해 모든 작업이 수행되었으며 실제 파일을 보내지 않고도 이를 수행할 수 있는 방법이 있습니다. Cypress.Buffer를 사용하면 됩니다(내부 구현을 볼 수 있습니다). 아래 링크된 저장소).

그리고 이것은 버튼 클릭을 통한 업로드뿐만 아니라 드래그 앤 드롭 업로드에도 작동했습니다. 매우 간단했습니다... cypress에게 감사드립니다.

1. 섀도우 DOM:

Shadow DOM의 미스터리는 요소가 기본 DOM 내부의 비밀과 같다는 것입니다. 그것들은 숨겨져 있고 일반적인 CSS 가시성 규칙을 따르지 않습니다. 이는 자동화를 실행하는 방법에 따라 약간 까다로울 수 있습니다. 고맙게도 Cypress는 이 베일을 뚫고 숨겨진 요소를 찾는 섀도우 명령을 지원합니다.

이러한 테스트에서는 cy.get('element').shadow()를 사용하여 Shadow DOM 내의 요소에 액세스한 다음 더 이상 문제나 어려움 없이 원하는 대로 요소에 액세스하고 어설션을 수행할 수 있습니다. 일반 것들과 함께.

---

지금은 그게 다입니다.. Cypress를 사용하여 기본적인 브라우저 자동화 사용을 처리하는 방법과 이러한 경우를 처리할 때 이를 활용하여 생활을 더 쉽게 만드는 방법에 대한 간단한 6가지 예입니다. .

해볼 준비가 되셨나요?

이러한 테스트를 시도하거나 프로젝트에 적용하는 데 관심이 있으시면 GitHub 저장소에 코드를 제공했습니다. 테스트 스위트는 매우 가벼우므로 의심할 여지가 너무 많지 않아야 하며 GitHub Actions 흐름을 사용하여 모든 것이 실제로 어떻게 작동하는지 확인할 수 있습니다! 감사합니다 다음에 또 만나요!

위 내용은 Cypress를 사용한 인터넷: Heroku의 'The Internet' Playground의 실제 시나리오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!