양식을 테스트하기 위해 POM을 사용하여 Cypress 10+ 및 Cucumber를 사용하는 E2E 테스트 프레임워크

이 게시물에서는 간단한Form.io 양식을 테스트하기 위해 Cypress 10+ 및 Cucumber를 사용하여 페이지 개체 모델을 기반으로 테스트 프레임워크를 만드는 방법을 보여줍니다.

e2e 테스트를 수행하기 위해 formio angular demo application을 사용했습니다. 다음은 프로젝트github-repo입니다.

프로젝트 폴더를 만들고 프로젝트 루트 디렉터리를 탐색한 후 첫 번째 단계로 다음 명령을 사용하여 Cypress를 설치해야 합니다.

npm install cypress --save-dev

그런 다음 npx cypress open 명령으로 Cypress를 시작하면 Cypress가 개방 모드로 시작됩니다. E2E 테스트 단계는 기본 Cypress 구성에 도움이 됩니다.



지금까지는 기본적인 Cypress 설치 및 구성이었습니다. Cucumber를 추가하려면 다음 명령을 사용하여 Cucumber Preprocessor 및 browserify-preprocessor를 설치해야 합니다.

npm install @badeball/cypress-cucumber-preprocessor

npm install --save-dev @cypress/browserify-preprocessor

그런 다음 아래와 같이 노드 이벤트 및 기본 URL을 추가하기 위해 cypress.config.js 파일을 재정렬해야 합니다.

const {
  defineConfig
} = require("cypress");
const preprocessor = require("@badeball/cypress-cucumber-preprocessor");
const browserify = require("@badeball/cypress-cucumber-preprocessor/browserify");

async function setupNodeEvents(on, config) {
  // This is required for the preprocessor to be able to generate JSON reports after each run, and more,
  await preprocessor.addCucumberPreprocessorPlugin(on, config);

  on("file:preprocessor", browserify.default(config));

  // Make sure to return the config object as it might have been modified by the plugin.
  return config;
}
module.exports = defineConfig({

  e2e: {
    baseUrl: "https://formio.github.io/angular-demo/#/",
    setupNodeEvents,
    specPattern: "cypress/e2e/**/*.{feature,features}",
  },
  // excludeSpecPattern: "**/others/*",

});

e2e 폴더에서 다른 폴더를 만들고 formio-basic-form으로 이름을 지정했습니다. 그 폴더에 POM을 적용하기 위한 step definition js 파일과 object js 파일을 생성했고, e2e 폴더에 있는 formio-basic-form 폴더를 제외하고 이름은 같지만 feature 파일을 생성했습니다. 폴더 구조 및 기능 파일의 이미지는 다음과 같습니다.



객체 js 파일에 클래스를 만들고 여기에 모든 cypress 코드를 작성합니다.

class formiobasicform {

    static navigatingFormioAngularDemoApp() {
        //since we define base url in config , it will directly go application
        cy.visit('/')

    }
    static fillingBasicForm() {

        cy.get("input[placeholder='Enter your first name']").type("firstname")
        cy.get("input[placeholder='Enter your first name']").type("lastname")
        cy.get("input[placeholder='Enter your email address']").type("[email protected]")
        cy.get("input[name='data[phoneNumber]']").type(1233451223)
        cy.get("[name='data[survey][howWouldYouRateTheFormIoPlatform]']").eq(0).click()
        cy.get("[name='data[survey][howWasCustomerSupport]']").eq(0).click()
        cy.get("[name='data[survey][overallExperience]']").eq(0).click()
        cy.get("canvas.signature-pad-canvas").click({
            which: 1
        })
        cy.get("button[name='data[submit]']").click()
    }
    static verifyingSubmission() {
        cy.get("formio-alerts .alert-success").should("be.exist")
    }

}
export default formiobasicform;

그런 다음 아래와 같이 단계 js 파일에 단계 정의를 작성했습니다.

const {
    Given,
    When,
    Then,

} = require("@badeball/cypress-cucumber-preprocessor");
import formiobasicform from "./formio-basic-form-object";

//Scenario: verifying filling simple formio form 
Given("user navigate formio", () => {
    formiobasicform.navigatingFormioAngularDemoApp()
})
When("user fill the form", () => {
    formiobasicform.fillingBasicForm()
})
Then("user verify form submission", () => {
    formiobasicform.verifyingSubmission()

})

이러한 파일을 만든 후 첫 번째 테스트 시나리오는 다음을 수행할 준비가 되었습니다.
e2e 테스트를 실행합니다.
헤드리스 모드에서 테스트를 실행하는 명령:

npx 사이프러스런

공개 모드에서 테스트를 실행하는 명령:

npx 사이프러스 오픈