E2E тест (Cypress билан): фойдаланувчи тажрибасини автоматик текшириш

Сайт ёки веб-илова устида ишлаганингизда энг аччиқ ҳолатлардан бири шуки, код алоҳида-алоҳида тўғри ишлайди, лекин фойдаланувчи ҳақиқий браузерда бирор амални бажармоқчи бўлганда ҳамма нарса бузилади. Форма юборилмайди, тугма босилганда ҳеч нарса содир бўлмайди ёки рўйхатдан ўтиш саҳифаси нотўғри йўналтиради. End-to-end (E2E) тест айнан шу муаммони ҳал қилиш учун мавжуд: у иловани бўлакларга бўлмасдан, бутунлигича, худди реал одам ишлатаётгандек текширади.

E2E тест браузерни очади, саҳифага киради, майдонларни тўлдиради, тугмаларни босади ва экранда кутилган натижа пайдо бўлганини тасдиқлайди. Бу ёндашув фронтенд, бекенд, маълумотлар базаси ва тармоқ сўровлари биргаликда тўғри ишлашини бир вақтнинг ўзида текширади. Шу сабабли E2E тест фойдаланувчи тажрибасига энг яқин турадиган тест тури ҳисобланади ва у реал ҳаётдаги носозликларни энг эрта босқичда ушлайди.

E2E тест юнит тестдан нимаси билан фарқ қилади

Юнит тест дастурнинг энг кичик бўлагини — битта функцияни ёки битта компонентни — бошқалардан ажратиб текширади. Масалан, нархни ҳисоблайдиган функцияга сонларни бериб, натижаси тўғрими ёки йўқлигини кўрасиз. Бундай тестлар жуда тез ишлайди ва хато қаердалигини аниқ кўрсатади, лекин улар алоҳида қисмлар бир-бири билан қандай боғланишини текшира олмайди.

E2E тест эса аксинча, бутун занжирни текширади. У фойдаланувчи кўрадиган саҳифадан бошланиб, сервер жавоби ва маълумотлар базасидаги ўзгаришгача бўлган барча қатламлардан ўтади. Шу сабабли E2E тест секинроқ ишлайди ва хато қаерда юзага келганини аниқлаш бироз қийинроқ бўлади, лекин у энг муҳим нарсани кафолатлайди: фойдаланувчи ҳақиқатан ҳам ўз мақсадига эриша оладими ёки йўқ. Энг яхши лойиҳалар иккала тест турини биргаликда ишлатади — кўп сонли тез юнит тестлар ва камроқ сонли, лекин чуқур E2E тестлар.

Cypress нима ва нега у қулай

Cypress — бу замонавий веб-иловалар учун яратилган E2E тест воситаси бўлиб, у тестларни тўғридан-тўғри реал браузер ичида ишга туширади. Бу унинг энг катта афзаллиги: тест бажарилаётганда сиз ҳар бир қадамни ўз кўзингиз билан кўрасиз, қайси тугма босилганини ва саҳифа қандай ўзгарганини кузатасиз. Агар тест хато берса, Cypress айнан қайси нуқтада тўхтаганини визуал равишда кўрсатиб беради, бу эса хатони топишни жуда осонлаштиради.

Cypress'нинг яна бир кучли томони — унинг содда ва ўқиш осон синтаксиси. Тест коди шу қадар табиий ёзиладики, ҳатто дастурлашни энди ўрганаётган QA муҳандиси ҳам нима содир бўлаётганини дарров тушунади. У JavaScript асосида ишлайди, ўрнатиш бир неча буйруқ билан якунланади ва қўшимча мураккаб созламалар талаб қилмайди. Айнан шу соддалиги туфайли кўплаб жамоалар E2E тестлашни Cypress'дан бошлайди.

Оддий тест мисоли

Келинг, энг кенг тарқалган сценарийни — тизимга кириш формасини текширувчи тестни кўриб чиқайлик. Қуйидаги кодда биз саҳифага кирамиз, логин ва парол майдонларини тўлдирамиз, тугмани босамиз ва натижада фойдаланувчи шахсий кабинетга ўтганини тасдиқлаймиз. Диққат қилинг, код деярли оддий инглиз тилидаги жумлалардек ўқилади.

describe('Login page', () => {
  it('logs in with valid credentials', () => {
    cy.visit('https://sayt.uz/login')

    cy.get('input[name="email"]').type('user@example.com')
    cy.get('input[name="password"]').type('SecretPass123')

    cy.get('button[type="submit"]').click()

    cy.url().should('include', '/cabinet')
    cy.contains('Welcome').should('be.visible')
  })
})

Бу тестда cy.visit браузерни очиб саҳифага киради, cy.get керакли майдонни топади, type эса унга матн ёзади. click тугмани босади, should эса натижани текширади. Агар URL манзилида /cabinet бўлса ва экранда "Welcome" ёзуви кўринса, демак тест муваффақиятли ўтди ва кириш жараёни тўғри ишлаяпти.

Селекторлар — элементларни қандай топиш

Cypress саҳифадаги элементларни топиш учун CSS селекторлардан фойдаланади: тегнинг номи, класси, идентификатори ёки атрибутлари орқали. Юқоридаги мисолда биз input[name="email"] деб ёзиб, номи "email" бўлган киритиш майдонини танладик. Бироқ тажриба шуни кўрсатадики, саҳифанинг дизайни ўзгарганда класс номлари тез-тез алмашади ва шу сабабли уларга боғланган тестлар бузилиб қолади.

Айнан шу муаммони олдини олиш учун кўпчилик жамоалар махсус data-cy атрибутларидан фойдаланишни тавсия қилади. Бу атрибут фақат тестлаш учун мўлжалланган бўлиб, дизайн ўзгарса ҳам ўзгармайди. Масалан, HTML'да <button data-cy="submit-login"> деб белгилаб, тестда cy.get('[data-cy=submit-login]') орқали мурожаат қиласиз. Бундай ёндашув тестларни анча барқарор қилади ва кейинчалик хизмат кўрсатишни осонлаштиради.

Auto-wait — автоматик кутиш

Веб-иловалар билан ишлашда энг катта оғриқлардан бири вақт масаласидир. Саҳифадаги маълумотлар сервердан келгунча бироз вақт ўтади, анимациялар тугаши керак, сўровлар жавоб қайтариши лозим. Эски тест воситаларида дастурчи қўлда "уч сония кут" деган буйруқлар ёзишга мажбур бўларди, бу эса тестларни секин ва ишончсиз қиларди.

Cypress бу муаммони ўзининг auto-wait механизми билан ҳал қилади. У ҳар бир буйруқдан олдин элемент пайдо бўлишини, кўринадиган ва босишга тайёр бўлишини автоматик равишда кутади. Яъни сиз cy.get ёзсангиз, Cypress элемент ҳали юкланмаган бўлса, уни бироз кутиб туради ва шундан кейингина давом этади. Бу сизнинг кодингизни соддалаштиради ва тестларни реал фойдаланувчи тезлигига мослайди, натижада тасодифий хатолар анча камаяди.

CI'да Cypress ишлатиш

Тестлардан тўлиқ фойда олиш учун улар ҳар бир код ўзгаришидан кейин автоматик ишга тушиши керак. Буни узлуксиз интеграция (CI) тизимлари таъминлайди — масалан GitHub Actions, GitLab CI ёки бошқа платформалар. Дастурчи янги кодни юбориши билан тизим автоматик тарзда Cypress тестларини ишга туширади ва агар бирор тест бузилган бўлса, ўзгаришни сайтга чиқаришни тўхтатади.

Cypress'ни CI'да ишга тушириш учун махсус буйруқ мавжуд бўлиб, у браузерни экрансиз, яъни "headless" режимда ишлатади. Қуйидаги мисол GitHub Actions учун оддий созламани кўрсатади.

name: E2E Tests
on: [push]
jobs:
  cypress:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npx cypress run

Бу созлама ҳар бир push'дан кейин лойиҳани юклаб олади, керакли пакетларни ўрнатади ва npx cypress run буйруғи билан барча тестларни ишга туширади. Агар тест муваффақиятсиз тугаса, жамоа дарров хабардор бўлади ва муаммони фойдаланувчилар дуч келишидан олдин тузатади.

Cypress ва Playwright — қисқача таққослаш

Cypress'нинг асосий рақиби — Playwright бўлиб, у Microsoft томонидан яратилган ва кейинги йилларда тез оммалашиб бормоқда. Playwright бир нечта браузерларни (Chrome, Firefox, Safari) бир хил даражада қўллаб-қувватлайди ва бир вақтнинг ўзида кўплаб тестларни параллел ишлатишда кучлироқ ҳисобланади. У турли дастурлаш тилларини, жумладан Python ва C#'ни ҳам қўллаб-қувватлайди.

Cypress эса ўзининг қулай визуал интерфейси ва ўрганишнинг соддалиги билан ажралиб туради, айниқса бошловчилар учун. Агар сиз битта браузерда ишлайдиган содда лойиҳа устида ишласангиз ва тестларни тез ёзиб, кўринишини кузатишни хоҳласангиз, Cypress яхши танловдир. Мураккаб, кўп браузерли ва кенг кўламли лойиҳаларда эса Playwright устунлик қилиши мумкин. Иккаласи ҳам мукаммал воситалар бўлиб, асосийси — лойиҳангизда E2E тестлардан умуман фойдаланишни бошлашдир.