Cypress로 클립보드에 복사 테스트

9463 단어 clipboardcypresstestingautomation

클립보드에 보관된 내용과 같이 브라우저 창에 저장된 정보를 읽는 방법 알아보기



기본값이 Hello world인 텍스트 입력 필드와 이름에서 알 수 있듯이 클릭하면 해당 영역에 입력 텍스트를 복사하는 클립보드에 복사라는 버튼만 있는 간단한 애플리케이션을 상상해 보십시오.

애플리케이션에 접속하자마자 클릭하면 Hello world라는 텍스트가 복사된다.

그러나 해당 필드가 지워지면 다른 텍스트가 입력되고 버튼을 다시 클릭하면 새 텍스트가 복사됩니다.

그러면서 스스로에게 묻습니다.

How to test these scenario with Cypress?



이 "Pinch of Cypress"에서 보여드릴 내용이기 때문에 질문해 주셔서 감사합니다.

애플리케이션 코드는 다음index.html 파일에 요약되어 있습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Copy to clipboard example page</title>
    <style>
      * {
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <h1>Copy to clipboard sample</h1>
    <input type="text" value="Hello World" id="copy-to-clipboard-input-field">
    <button onclick="copyToClipboard()">Copy to clipboard</button>
    <script>
      function copyToClipboard() {
        const copyText = document.getElementById("copy-to-clipboard-input-field")

        copyText.select() // Select the text field
        copyText.setSelectionRange(0, 99999) // For mobile devices

        // Copy the text inside the text field
        navigator.clipboard.writeText(copyText.value)
      }
    </script>
  </body>
</html>


그리고 다음 파일cypress/integration/copyToClipboard.spec.js의 테스트 코드입니다.

it('copies the input field text to the clipboard', () => {
  cy.visit('./index.html')

  cy.contains('button', 'Copy to clipboard').click()

  cy.assertValueCopiedToClipboard('Hello World')

  cy.get('#copy-to-clipboard-input-field')
    .clear()
    .type('Foo bar baz')

  cy.contains('button', 'Copy to clipboard').click()

  cy.assertValueCopiedToClipboard('Foo bar baz')
})

Cypress.Commands.add('assertValueCopiedToClipboard', value => {
  cy.window().then(win => {
    win.navigator.clipboard.readText().then(text => {
      expect(text).to.eq(value)
    })
  })
})


테스트에서 먼저 테스트 중인 애플리케이션, 즉 index.html 파일을 방문합니다.

그런 다음 클립보드에 복사라는 텍스트가 있는 버튼을 찾아 클릭합니다.

버튼을 클릭하면 입력 필드의 기본 텍스트가 클립보드에 복사되어야 하므로 나중에 설명할 사용자 지정 명령을 통해 올바른 값이 복사되었는지 확인합니다.

그런 다음 입력을 지우고 다른 값을 입력한 다음 버튼을 다시 클릭합니다.

마지막으로 새 값이 클립보드에 복사되어 이전 값을 대체하는지 확인합니다.

이제 값이 클립보드에 올바르게 복사되었는지 확인하는 사용자 지정 명령에 대해 자세히 설명하겠습니다.

명령은 비교할 value, 즉 예상 결과를 인수로 받습니다.

구현 시에는 cy.window() 명령을 실행하여 .then() 명령을 연결하고 브라우저 창( win )을 인수로 사용하는 콜백 함수에 전달합니다.

창( win )에 액세스하여 navigator 속성에 액세스하고 거기에서 clipboard 속성에 액세스한 다음 readText() 함수를 사용하여 클립보드에 복사된 텍스트를 읽습니다. another .then() , 여기서 콜백 함수는 클립보드에 포함된 text 를 인수로 받아 text 가 예상한 value 와 같은지 확인할 수 있습니다.

그리고 이것은 Cypress로 브라우저 클립보드에 복사된 값을 테스트하는 방법입니다.

아래 gif에서 실행 중인 테스트를 참조하십시오.



또한 GitHub 의 전체 코드를 참조하십시오.

⭐를 남길 기회를 잡으세요!


참조: https://www.w3schools.com/howto/howto_js_copy_clipboard.asp .


내용이 마음에 드셨나요? 코멘트를 남겨주세요.


Cypress 테스트 자동화에 대해 궁금하고 더 알고 싶으십니까? Udemy에서 내 과정을 확인하십시오.


👋 다음 시간까지, 즐거운 테스트 하세요!


이 게시물은 원래 Talking About Testing 블로그에 포르투갈어로 게시되었습니다.
Golang 기본 - Constantes
IBM Cloud: VPC 서버 프로비저닝 시 지정한 스크립트 자동 실행

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage