Cypress 및 페이지 개체 패턴 - EndToEnd 테스트를 위한 모범 사례

속성 이름과 일관성 유지

<button class="registration-button"
data-test="registration-page__button-start">Register</button>

<button class="open-settings"
data-test="settings-page__button-open">Settings</button>

// it is just important that you are consistent with it and have a system in place
<page-name>__<element-type>-<semantic-action>
or even
<page-name>-<component-name>__<element-type>-<semantic-action>
or just
<component-name>__<element-type>-<semantic-action>

테스트를 재사용 가능한 구조로 분할

페이지 개체 패턴

/**
 * The Widget Test Interaction Page Object - abstract class!!
 */
class FormPageObject {
  defaultOpenSelector = '';
  defaultSubmitUrl = '';
  defaultSubmitButtonSelector = '';
  defaultInterceptName = '';
  defaultSelectorForStringInputChange = '';
  defaultCloseSelector = '';
  defaultMessageSelector = '';

  /**
   * Opens the widget
   */
  open(
    selector = this.defaultOpenSelector,
    options = {},
    inputSelector = ''
  ) {
    return cy
      .$(selector, options, inputSelector)
      .click({
        force: true,
      })
      .scrollIntoView({ offset: { top: -100, left: 0 } });
  }


  /**
   * Close the  widget
   */
  close(
    selector = this.defaultCloseSelector,
    options = {},
    inputSelector = ''
  ) {
    return cy.$(selector, options, inputSelector).click({
      force: true,
    });
  }


  /**
   * The intercept will register with the default name and url and will look for the next request
   * hence you can wait for it. By default it is expecting that the response will work.
   * You can also force a success true
   */
  interceptSubmit(
    forceSuccess = false,
    forceFailure = false,
    shouldSucceed = false,
    inputUrl = '',
    interceptName = this.defaultInterceptName,
  ) {
    const url = inputUrl ?? this.defaultSubmitUrl;
    cy.intercept('POST', url, (req) => {
      req.continue((res) => {
        if (forceSuccess) {
          res.body.success = true;
        } else if (forceFailure) {
          res.body.success = false;
        } else if (!res.body.success && shouldSucceed) {
          expect(
            res.body.success,
            'It was not possible to change the the widget and it was expected that it would be possible'
          ).to.be.true;
        }
        return res;
      });
    }).as(interceptName);
  }


  updateStringInput(
    input = '',
    selector = this.defaultSelectorForStringInputChange
  ) {
    let newString = '';
    if (input === '') {
      return cy.stringInput(selector, input);
  }



  submit(
    selector = this.defaultSubmitButtonSelector,
    options = {},
    inputSelector = ''
  ) {
    cy.$(selector, options, inputSelector).click({
      force: true,
    });
  }



  submitValidator(req, messageSelector = this.defaultMessageSelector) {
    cy.isRequestValid(req);
    const correctClass = req.response.body.success
      ? 'alert-success'
      : 'alert-danger';
    cy.checkForClass(
      correctClass,
      messageSelector,
      `The submit request returned ${req.response.body.success}, but the message had not this class ${correctClass}`
    );
  }
}

 */

class FormComponentA extends FormPageObject {
  defaultOpenSelector = 'form-componentA__button--open';
  defaultSubmitUrl = /regexForSubmitUrl/;
  defaultSubmitButtonSelector = 'form-componentA__button--submit';
  defaultInterceptName = 'formComponentASubmit';
  defaultSelectorForStringInputChange = 'form-componentA__input-text--type';
  defaultMessageSelector = 'form-componentA__message'
}

class FormComponentB extends FormPageObject {
  defaultOpenSelector = 'form-componentB__button--open';
  defaultSubmitUrl = /regexForSubmitUrl/;
  defaultSubmitButtonSelector = 'form-componentB__button--submit';
  defaultInterceptName = 'formComponentBSubmit';
  defaultSelectorForStringInputChange = 'form-componentB__input-text--type';
  defaultMessageSelector = 'form-componentB__message'

  // this component needs some custom interaction, e.g. a slider
  useSlider(percentage = 0, selector = 'default-selector-for-slider') {
    cy.moveSlider(selector, percentage);
  }
}

describe('test-for-component-A', () => {
  it('should fail and display error message', () => {
    const component = new FormComponentA();
    component.open();
   
    // e.g. update name input
    component.updateStringInput('Max');
  
    // set up the interceptor and force it to fail
    component.interceptSubmit(false, true);
  
    // hit the submit button
    component.submit();
   
    // wait for the request and evaluate the response
    cy.wait(component.defaultInterceptName).then((req) => {
      component.submitValidator(req);
    });
  });



  it('should succeed and display success message', () => {
    const component = new FormComponentA();
    component.open();

    // set up the interceptor and force it to succeed
    component.interceptSubmit(true);

    component.updateStringInput('Max');
    component.submit();
    cy.wait(component.defaultInterceptName).then((req) => {
      component.submitValidator(req);
    });
  });
});

  constructor(componentName, interceptRegex) {
    this.defaultOpenSelector = `.${componentName}__button-open`;
    this.defaultSubmitUrl = interceptRegex;
    this.defaultSubmitButtonSelector = `.${componentName}__button--submit`;
    this.defaultInterceptName = `${componentName}Intercept`;
    this.defaultSelectorForStringInputChange = `.${componentName}__input-text--type`;
    this.defaultMessageSelector = `.${componentName}-message`;
  }

const component = new FormPageObject('form-componentB');

알려주세요 🚀🚀🚀