?? ? ?? (E2E) ???? ???? ??? ?? ???? ??? ?????. ?? ??? ?? CI (Continuous Integration) ?? ????? ??????. ??? ???? ???? ??? ?? ??? ???? ??????. Cypress? ?? React? ?? ?? JavaScript ?????? ??? ????? ????? ??? E2E ??? ??? ?????.

??? ?? ???? ??

? ????? ?? TODO ?? ????? ?????. ???? ?? ? ? ????.

 git ?? [??? ??] : KinsomicRote/Cypress-React-Tutorial.git

????? ???? ???? ??????.

 CD Cypress-React-Tutorial
?? ??

Cypress ?? :

 ?? Cypress -Dev ??

?? ????? :

 node_modules/.bin/cypress Open

?? ??????? ????? package.json ? ??????.

 "????": {
  "Cypress": "Cypress Open"
}

?? yarn cypress ???? ?????? ?????. yarn start .

cypress/integration/init.spec.js ?? ?? ???? ??? ???.

 ?? ( 'cypress', () => {
  it ( '?? ?', () => {
    ?? (true) .to.equal (true);
  });
});

??? ?????? ???? ??? ?????. ?? ? ??? ??????.

 it ( '? ??', () => {
  cy.visit ( 'http : // localhost : 3000');
});

URL? ???? ???? cypress.json ?? ?? URL? ??????.

 {
  "Baseurl": "http : // localhost : 3000"
}

?? ???? ??? ? ? ????.

 it ( '? ??', () => {
  cy.visit ( '/');
});

??? ?? ??? ? ??

??? ?? ??? ?????? cypress/integration/form.spec.js ? ????.

 ?? ( 'form', () => {
  ?? (() => {
    cy.visit ( '/');
  });

  it ( '?? ??', () => {
    cy.focused ().
  });

  it ( '??? ??', () => {
    const input = "Cypress? ?? ?????";
    cy.get ( '. Form-Control')
      . ?? (??)
      .Should ( 'hade.value', ??);
  });

  it ( 'Todos? ?? ??', () => {
    cy.get ( 'li').
  });

  it ( '??? TODO? ?????', () => {
    const input = "Cypress? ?? ?????";
    cy.get ( '. Form-Control')
      . ?? (??)
      .type ( '{enter}')
      .get ( 'li')
      .HOUD ( 'hade.length', 3);
  });

  it ( 'todo? ??', () => {
    cy.get ( 'li')
      .? ??()
      .find ( '. btn danger')
      .?? ?? ??()
      .get ( 'li')
      .Should ( 'hade.length', 1);
  });

  it ( '?? ? ??? ??', () => {
    cy.get ( 'li')
      .? ??()
      .find ( '. btn danger')
      .?? ?? ??()
      .get ( 'li')
      .? ??()
      .find ( '. btn danger')
      .?? ?? ??()
      .get ( '. no-task')
      .HIBLE ( 'hade.text', '?? ??? ???????. ??? ???????!');
  });
});

? ???? ?? ??, ?? ??, ?? ?? ?, ?????? ?? ????, ?? ? ?? ????, ?? TODO? ?????.

???? ?? ???

???? ?? ???? ??? ?? ??? ???? ????????. ?? ?? JSON ?? ?? ? API ?? :

 ?? ( 'request', () => {
  it ( 'API?? ??? ???? ??', () => {
    cy.request ( 'https://jsonplaceholder.typicode.com/users')
      .Should ((??) => {
        expling (response.status) .to.eq (200);
        expling (response.body) .to.have.length (10);
        ?? (??) .to.have.property ( '??');
        expling (response) .to.have.property ( 'duration');
      });
  });
});

?? API ?? ??, ??? ?? ? ?? ??? ?????.

?? ??? ?? ????

????? ????? ??? ?? :

 NPX Cypress Run

?? ???? ????? :

 NPX Cypress Run -Spec "Cypress/Integration/Form.spec.js"

??? ??? ??? ?? ?? ? ??? ?????. ?? ?? ?? ? ??? Cypress ??? ??????.

??

Cypress? E2E ???? ????? ????? ????? ?????. ? ????? ?? ? ?? ??? ??? ?? ??? ??? ? ????? ?????. ?? ?? ?? ? ?? ??? Cypress ??? ??????.

? ??? Cypress? ???? React ?? ????? ?? ???? ?????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!