Cypress Studio : Cypress 테스트 프레임워크 (테스트. 자동화. 가속화)

 

 

 

 

Cypress Studio는 Cypress 테스트 프레임워크의 일부로, 주로 웹 애플리케이션의 end-to-end(전체적인 시스템을 대상으로 한) 테스트를 위해 설계되었습니다. Cypress는 견고성, 사용 편의성 및 빠른 실행 속도로 알려져 있습니다. Cypress Studio는 Cypress 내의 기능 중 하나로, 시각적인 테스트 레코더를 제공하여 테스트 경험을 향상시킵니다.

Cypress Studio의 주요 목적은 웹 애플리케이션과 상호작용하고 Cypress 테스트 스크립트로 이러한 상호작용을 기록함으로써 end-to-end 테스트를 만드는 과정을 단순화하는 것입니다. Cypress Studio를 사용하면 테스터와 개발자들이 Cypress 테스트 러너 UI에서 웹 애플리케이션과 상호작용하면서 그 과정을 테스트 스크립트로 기록할 수 있습니다.

Cypress Studio의 주요 기능은 다음과 같습니다:

 

시각적 테스트 레코더: Cypress Studio는 사용자가 웹 애플리케이션과 상호작용하고 해당 상호작용을 테스트 명령어로 기록할 수 있는 사용자 친화적 인터페이스를 제공합니다.

코드 생성: Cypress Studio를 통해 사용자가 웹 애플리케이션과 상호작용하면 Cypress가 자동으로 해당 상호작용에 대한 Cypress 명령어를 테스트 스크립트에 생성합니다.

코드 편집: Cypress Studio에서 생성된 테스트 스크립트를 직접 검토하고 편집할 수 있으므로 테스트 시나리오를 사용자 정의하고 세부 조정할 수 있습니다.

디버깅 도구: Cypress Studio는 Cypress 테스트 러너 UI 내에서 디버깅 도구를 제공하여 테스트 스크립트의 문제를 해결하는 것을 용이하게 합니다.

 

 

전반적으로, Cypress Studio는 테스트 생성 과정을 간소화하고 수동 스크립팅의 필요성을 줄이며 웹 애플리케이션의 end-to-end 테스트 개발을 가속화하는 데 사용됩니다. Cypress Studio는 테스트 생성에 대한 시각적 접근을 선호하는 팀이나 개인, 또는 Cypress 테스트 스크립트 작성에 익숙하지 않은 사용자들에게 특히 유용합니다.

 

덕분에 좋은 블로그 내용 (https://inpa.tistory.com/1114)을 보고 나서, 실 사용하는 사이트에 적용을 해보니 유닛 테스트 하는데 많은 도움이 될거라 생각합니다 

 

 

 

 

자동화 예외적인 textarea 입력 안 될경우

 

Cypress를 사용하여 웹페이지의 textarea 요소와 상호 작용하는 경우 Cypress가 요소를 입력하기 전에 요소가 상호 작용할 때까지 기다려야 합니다. 때때로 Cypress는 준비가 되기 전에 textarea 에 입력을 시도하여 텍스트가 입력되지 않을 수 있습니다.

 

보통은 아래 예제처럼 .click() .type("입력값")  을 통해 사용이 가능합니다.

cy.get(":nth-child(6) > .form-field-group > .form-field-box > .form-textarea > textarea").click().type("test");

 

 

다만, .click() .type("입력값") 형태의 접근 방식이 안정적으로 작동하지 않으면 Cypress에서 'invoke' 명령을 사용하여 textarea  에 입력하기 전에 해당 textarea 에 집중할 수 있습니다. 이는 Cypress가 요소와 적절하게 상호 작용하는지 확인하는 데 도움이 될 수 있습니다.

 

아래 예제처럼  .click().invoke("focus").type("입력값") 형태로 구현하면 제대로 입력이 됩니다.

 

describe("template spec", () => {
    /* ==== Test Created with Cypress Studio ==== */
    it("stepup_step1", function () {
        /* ==== Generated with Cypress Studio ==== */
        cy.visit("https://site.asp.me");
        cy.get("#id").clear();
        cy.get("#id").type("아이디");
        cy.get("#pwd").clear("");
        cy.get("#pwd").type("비밀번호");
        cy.get(".btn").click();
        cy.get(":nth-child(2) > :nth-child(4) > a").click();
        cy.get(".border-top-line > .form-textarea > textarea").click().invoke("focus").type("첫번째 테스트");
        cy.get(":nth-child(3) > .form-textarea > textarea").click().invoke("focus").type("두번째 테스트");
        cy.get(".border-top-line > .form-textarea > textarea");
        cy.get(":nth-child(6) > .form-field-group > .form-field-box > .form-textarea > textarea").click().invoke("focus").type("심재운 잘한다. 테스트");
        cy.get(":nth-child(6) > .form-field-group > .form-field-box > .form-textarea > textarea").click().invoke("focus").type("심재운 못한다. 테스트!!");
        cy.get(".action > .btn-mint").click();
        /* ==== End Cypress Studio ==== */
    });
});

 

 

invoke('focus') 명령은 textarea  요소를 입력하기 전에 명시적으로 textarea  요소에 focus  를 설정합니다. 이는 때때로 Cypress가 요소와 제대로 상호 작용하지 못하는 문제를 해결할 수 있습니다.

 

should() 또는 wait()와 같은 Cypress 명령어 활용해 보기

 

또한 Cypress가 상호 작용하기 전에 트리거되어야 하는 특정 이벤트 리스너 또는 behaviors 이 textarea  에 있는 경우 textarea  에 입력하기 전에 이러한 작업이 완료될 때까지 기다려야 할 수도 있습니다. should() 또는 wait()와 같은 Cypress 명령을 사용하여 요소가 상호 작용할 준비가 되었는지 확인할 수 있습니다.

다음은 should() 명령을 사용하여 textarea 에 입력하기 전에 textarea  이 표시될 때까지 기다리는 예입니다.

 

cy.get(":nth-child(6) > .form-field-group > .form-field-box > .form-textarea > textarea")
  .should('be.visible')
  .click()
  .invoke('focus')
  .type("test");

 

 

설치 가이드 및 기초 가이드는 아래 블로그를 참고해 주세요.

 

https://inpa.tistory.com/1114

[Cypress Studio] 📝 더욱 간편해진 웹 테스트 자동화 툴

 

https://www.cypress.io/

Testing Frameworks for Javascript | Write, Run, Debug | Cypress