Cypress with vue

Testing vue app with cypress

რატომ Cypress?

• აქვს კარგი დოკუმენტაცია

• მარტივია რომ დაიწყო, რადგან აქვს "zero-configuration" მიდგომა

• cypress-ის მთავარი ნიშა არის E2E(ტესტირების ტიპი რომელიც ბაძავს იუზერის ინტერაქციას ჩვენს აპლიკაციასთან) ტესტები და აქვს შესაბამისი დამხარე ხელსაწყოები(time travel, screenshots and videos)

Cypress-ის კონფიგურაცია

ვიუს აპლიკაციაში cypress-ის ინტეგრაციის ორი გზა არსებობს: ერთი, როდესაც ახალი ვიუს აპლიკაციას ვქმნით ბრძანებით npm init vue@latest , შეგვიძლია კონფიგურაციაში ავირჩიოთ რომ აპლიკაცია შეიქმნას cypress-სთან ერთად და მეორე, თუ უკვე არსებულ ვიუს აპლიკაციაში გვინდა cypress-ის დაყენება უბრალოდ გავუშვათ npm install cypress -D

Explore One cypress test

მას შემდეგ რაც cypress დავაინსტალირეთ ჩვენს აპლიკაციაში, შეგვიძლია გავუშვათ ბრძანება npx cypress open

ეს ბრძანება გაგვიხსნის სრულიად დამოუკიდებელ ბრაუზერს, რომელსაც cypress აკონტროლებს

cypress

ავირჩიოთ E2E Testing და რომელიმე ბრაუზერი

ახლა კი გამოვიკვლიოთ ერთი ტესტი, რომელიც მოთავსებულია cypress/e2e/example.cy.js მისამართზე. you can see repository here

describe("Create user with form", () => {
  it("send user creation request", () => {
    cy.intercept(
      {
        method: "POST",
        url: "api/users",
      },
      {
        message: "OK",
      }
    ).as("CreateUser");
    
    cy.visit("/");
    cy.get("#first_name").type("Jane");
    cy.get("#last_name").type("Doe");
    cy.get("#email").type("[e-mail]");
    cy.get("button").click();
    
    cy.wait("@CreateUser").then(({ response }) => {
      expect(response.body).to.be.an("object");
      expect(response.body.message).equals("OK");
    });
  });
});

ზემოთ მოცემულ მაგალითში გვაქვს გვერდი, რომელზეც მოთავსებულია ფორმა იუზერის შესაქმნელად. იმის საშუალებას რომ ამ გვერდს ვესტუმროთ cy.visit("/"); ბრძაენებით და არ მოგვიწიოს ყოველ ჯერზე სრული მისამართის ჩაწერა, გვაძლევს cypress.config.js ფაილი სადაც გვიწერია შემდეგი კონფიგურაცია baseUrl: "http://localhost:5173"

შემდეგ ტესტ რანერი შეავსებს ინფუთებს და გამოიძახებს ჰენდლერს, ხოლო რადგან ტესტის თავში გვაქვს გამოყენებული cy.intercept, /api/users-ზე გაგზავნილ რექვესთს დაიჭერს cypress და უპასუხებს შესაბამისი response-ით. შემდეგ კი შეგვიძლია დავუბრუნდეთ ტესტ რანერს და ვნახოთ რომ assertion-ები გამწვანდა 🎉