React-ის საიტის გატესტვა Cypress-ით

რა არის Cypress-ი

თუ ჩვენ შევალთ Cypress-ის საიტზე ჩვენ დავინახავთ რომ Cypress-ის გუნდი თავიანთ პროდუქტს მოკლედ აღწერს როგორც: "Fast, easy and reliable testing for anything that runs in a browser.". ეს კი შესანიშნავია, მაგრამ ბევრს არაფერს გვეუბნება. Cypress-ის საშუალებით შეგვიძლია ჩვენი საიტი პირდაპირ ბრაუზერში გავტესტოთ, იმის მაგივრად რომ ყველა კომპონენტი ცალ-ცალკე გავუშვათ და რაც კი ჭირდება კომპონენტს გასაშვებად (redux state, useContext state) ხელით გავწეროთ სატესტო ვერსია რაც უნდა გავაკეთოთ ზოგიერთ testing framework-ში, რაც უკვე გასაოცარია და ბევრად ადვილია, მაგრამ Cypress-ი მარტო ამას არ გვათავაზობს, ის ასევე გვთავაზობს: დროში მოგზაურობას(not irl just in code... yet), ადვილი დებაგინგი, ავტომატური ლოდინი, სურათის და ვიდეოების გადაღება, code coverage, request intercepting, დიდ გუნდში გამარტივებული მუშაობა, სხვადასხვა ბრაუზერებში საიტის ტესტვა და სხვა მრავალი.

ეს სახელები ბევრს არაფერს გვებუნება, ასე რომ, მოდი აღვწეროთ ისინი რას ნიშნავენ:

დროში მოგზაურობა: ბრაუზერში გატესტვის დროს, დროში მოგზაურობა და შესაძლებლობა რომ ვნახოთ DOM-ის მდგომარეობა ნებისმნიერ დროს

ადვილი დებაგინგი: ტესტის გაფუჭების მიზეზის პოვნა ჩვენთვის ძაან ადვლი იქნება იმის გამო რომ, ის იგივეა როგორც ჩვეულებრი საიტის დებაგინგი, შეგვიძლია კონსოლის, step debugger-ის გამოყენება, კოდის დაპაუზება, მეტი ინფორმაციისთვის ეწვიეთ დოკუმენტაციას

code coverage: ჩვენ cypress-ში შეგვიძლია დეტაულრი ინფორმაცია ვნახოთ თუ კოდის რა ნაწილი იტესტება, ეს როგორ უნდა გავაკეთოთ არის ახსნილი Cypress-ის dashboard

რექუესტების შეჩერება: იმის მაგივრად რომ ნადვილ backend-ს ვუგზავნოთ და მოვითხოვოთ ინფორმაცია და სერვერი გადავტვირთოთ უაზრო ინფორმაციით ან ბევრი მოვთხოვნით, ჩვენ შეგვიძლია ისინი ადვილად შევაჩეროთ და ჩავანაცვლოთ cy.intercept() ბრძანებით

დიდ ჯგუფში გამარტივებული მუშაობა: ამას Cypss-ი აკეთებს Dashboard-ის დახმარებით მასზე მეტი ინფორმაცია შეგიძლიათ Cypress-ის dashboard ნახოთ

Cypress-ის დაყენება და კონფიგურაცია

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

npm install cypress --save-dev

npx cypress open

ეს ორი ბრძანება cypress-ს გახსნის და დავინახავთ cypress-ის test runner/browser-ს სადაც ასეთ რამეს დავინახავთ:

cypress v10

ჩვენ ამ ეტაპზე კომპონენტების ტესტირება არ გვაიტერესებს ასერომ მოდი E2E testing-ის დავაჭიროთ და... cypress-მა გააკეთა ჩვენს მაგივრად ყველაფერი 🎉,

მოდი continue-ს დავაჭიროთ და ტესტები ელექტრონში გავხსნათ:

cypress-ის ძალიან დეველოპერის მეგობრული framework-ი და გვთააზობს საშუალებას რომ სამაგალითო ტესტები შევქმანთ:

ამისთვის scalfold example specs-ს შეგვიძლია დავაჭიროთ, რაც სამაგალითო ტესტებს შექმნის რომლებსაც რათქმაუნდა შეგვიძლია გადავხედოთ და ბევრი რამ ვისწავლოთ მაგრამ ეგ თქვენთვის მომინდია 🙌 ჩვენი ფაილური სისტემა ამის მერე ასე გამოიყურება:

ყველა საქაღალდე მნიშვნეოვანია და მაგას ცოტახანში ვნახავთ

cypress.config.js-ის კონფიგურაცია

ეს ფაილი არის cypress-ის კონფიგურაციისთვის ის უამრავ რამეში შეგვიძლია გამოვიყენოთ მეტი ინფომრაციისთვის ეწვიეთ დოკუმენტაციას მაგრამ აქ მაინც მინდა ერთი პატარა რამის დაფარვა:

იმის მაგივრად რომ ჩვენ ყოველ ჯერზე ჩვენი საიტის მთლიანი ლინკი ვწეროთ შეგვიძლია cypress.config.js-ში ეს ჩავწეროთ:

const { defineConfig } = require('cypress');

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
    baseUrl: 'http://localhost:3000',
  },
});

როგორც ხედავთ baseUrl-ი დავამატეთ ეხლა შეგვიძლია უბრალოდ დავწეროთ cy.visit('/')

იმისთვის რომ მთავარ გვერდზე შევიდიეთ და მთლიანი ლინკი არ ვწეროთ

cypress-ის პირველი ტესტი

დროა, რომ ჩვენი პირველი ტესტი დავწეროთ, ამისთვის ჩვენ უნდა შევქმნათ App.cy.js ფაილი cypress/e2e-ში, შიგნით კი ეს კოდი ჩავსვათ:

/// <reference types="cypress" />

describe('welcome page', () => {
  beforeEach(() => {
    cy.visit('/');
  });
  it('user can see welcome text', () => {
    cy.get('#welcome-text').should('be.visible');
  });
});

თუ პროექტში eslint-ს ვიყენებთ, შესაძლოა, რომ ამის ჩაწერის შემდეგ ედიტორმა გითხრათ, რომ cy არ არსებობს. ამის მოსაგვარებლად უნდა შევიდეთ .eslintrc.json-ში და plugin-ებში ჩავამატოთ "cypress" და გავუშვათ ბრძანება npm i eslint-plugin-cypress.

ამის შემდეგ ჩვენი ედითორი კმაყოფილი იქნება.

ახლა დროა, რომ ჩვენი ტესტი გავუშვათ, ამისთვის უნდა გავუშვათ ორი ბრძანება:

npm run start

npx cypress open

დავინახავთ cypress-ის ბრაუზერს:

ახლა უბრლოად დავაჭიროთ App.cy.js-ს და ჩვენი ტესტი გაეშვება and you can watch Cypress do its Magic ✨🌠🙌

როგორ გავიგოთ ჩვენი ტესტები კოდის რა ნაწილს ტესტავს?

საბედნიეროდ Cypress-ის გუნდმა ამაზე უკვე იზრუნა, ჩვენ უბრალოდ რამოდენიმე ბიბლიოთეკა უნდა დავაინსტალიროთ:

npm i -D nyc
npm i -D babel-plugin-istanbul
npm i -D istanbul-lib-coverage
npm i -D @cypress/code-coverage
npm i -D @cypress/instrument-cra

ამის მერე ჩვენ უნდა შევიდეთ cypress/support/e2e.js-ში და შიგნით ეს კოდი ჩავამატოთ:

import '@cypress/code-coverage/support';

და ჩვენ cypress.config.js-ის setupNodeEvents-ის ფუნქცია ასე უნდა შევცვალოთ:

setupNodeEvents(on, config) {
  require('@cypress/code-coverage/task')(on, config)
  return config
},

ამის მერე უნდა შევიდეთ package.json-ში და start-ის ბრძანებას პატარა მოდიფიკაცია გავუკეთოთ:

"start": "react-scripts -r @cypress/instrument-cra start",

და კიდევ ერთი პატარა ჩანამატი უნდა გავაკეთოთ. ჩვენი პროექტის root-ში შევქმნათ .babelrc

და შიგნით შემდეგი კონფიგურაცია ჩავწეროთ:

{
    "plugins": ["istanbul"]
}

და ყველაფერი მზად არის.

ახლა გავუშვათ npm start -ი და npx cypress open

გავუშვათ ჩვენი ტესტი, რის შემდეგაც ჩვენ პროექტში შეიქმნება .nyc_output და coverage-ის საქაღალდეები უმჯობესი იქნება თუ ორივეს .gitignore-ში ჩავსვამთ

იმისთვის, რომ ჩვენი code coverage-ი ვნახოთ უნდა შევიდეთ coverage/lcov-report-ში და იქ გავხსნათ index.html ფაილი, სადაც ასეთი რამ დაგვხვდება:

სამწუხაროდ ძალიან დაბალი პროცენტულობა გვაქ :/ რათქმაუნდა 100%-მდე უნდა ავიყვანოთ, თუ დაგვანტერესებს ზუსტად რა ხაზი/ფუნქცია არ იცენტრება შეგვიძლია ფაილებს დავაჭიროთ და შიგნით შევიდეთ სადაც გაუტესტავი ხაზები/ფუნქციები წითლად იქნება 🙌

Cypress-ის dashboard

cypress-ს აქვს ერთი გასაოცარი ტექნოლოგია, dashboard-ი რომელიც ძალიან გამოგადგებათ დიდ გუნდში მუშაობის დროს, dashboard-ი ინფორმაციას გიჩვენებთ თუ რომელ git ბრენჩზე ტესტავთ ამ აპლიკაციას, რომელ ბრაუზერში, ვიდეოს და სურათებს იღებს და გაჩვენებთ თქვენ და თქვენს გუნდს, ასევე გეხმარებთ Cypress-ის CI/CD-ში ჩამატებაში (more on this in future 😉), ჩვენი ტესტების ანალიტიკა და სხვა მრავალს.

მოდი მისი კონფიგურაცია ვცადოთ:

ჩვენ როცა npx cypress run -ს ვწერთ ტესტები იხსნება cypress-ის ბრაუზერში. თუ გადავალთ "runs" ტაბში დავინახავთ ღილაკს login in to dashboard, მოდი დავლოგინდეთ/დავრეგისტრირდეთ, ამის შემდეგ დავბრუნდეთ cypress-ის ბრაუზერში. დავინახავთ ღილაკს set up a project, მოდი ეს გავაკეთოთ, ამისთვის ჯერ უნდა შევქმნათ ორგანიზაცია ნებიმნიერი სახელით, ამის მერე თუ ინსტრუქციას გავყვებით პროექტს წარმატებით და უპორბლემოდ შევქმნით, არ უნდა დაგვავიწყდეს ბოლო ინსტრუქცია - cypress.json-ში projectId-ის ჩასმა აუცილებელია ⚠️⚠️⚠️⚠️⚠️

ასევე - არ უნდა დაგვავიწყდეს cypress.json-ის .gitignore-ში ჩამატება. ამასთანავე გავაკეთოთ cypress.json.example, რომელსაც git-ზე ავიტანთ და რომელშიც სამაგალითო ინფორმაცია ეწერება, მაგრამ არაფერი სენსიტიური, როგორიცაა თქვენი projectId, ან სხვა მრავალი.

// <API_KEY>-ის მაგივრად ჩაწერეთ თქვენი API-ის key რომელიც თქვენი პროექტის 
//ინფორმაციაში ეწერაბა ის ასე გამოიყურება ->161f77ee-fe0d-46ca-89bc-fcaa3f70ae0e
npx cypress run --record --key <API_KEY> --browser chrome

ამის შემდეგ როგორც დოკუმენტაციაში წერია, უნდა გავუშვათ შემდეგ ბრძანება, ამ ბრძანების გაშვების მერე ვეწვიოთ ჩვენ dashboard-ს სადაც რეზულტატს დავინახავთ.

შეხვედრის ჩანაწერი

ჩვენი რეაქტის პროექტი უკვე მზად არის სრულიად გასატესტად, რა თქმა უნდა Cypress არის უზარმაზარი framework და ბევრ ძალიან კარგ tool-ს გვთავაზობს, დამატებითი ინფორმაციისთვის დოკუმენტაციას გადახედეთ.

აბა შენ იცი 👋