տեխնոլոգիա

Սա LambdaGeeks Technology ուղղահայաց է, որը ներառում է համակարգչային գիտության և տեխնոլոգիայի հետ կապված բոլոր գրառումները:

Cypress պնդում. Handson Implementation, Օրինակ

Cypress Assertion-ն օգնում է մեզ պնդել որոշակի պնդումներ, որոնք վավերացման քայլեր են, որոնք ապահովում են, թե արդյոք ակնկալվող արդյունքը հավասար է իրական արդյունքին: Փորձարկման ավտոմատացման ժամանակ մենք պնդում ենք հայտարարություն՝ ստուգելու համար, որ թեստը տալիս է ակնկալվող արդյունքը: Եթե ​​պնդումը ձախողվում է, ապա փորձնական դեպքը ձախողվում է՝ ապահովելով, որ կա վրիպակ: Այս հոդվածում մենք կքննարկենք Cypress Assertion with Handson իրականացում և օրինակներ.

Cypress պնդում

Աղյուսակ Բովանդակության

Ի՞նչ է Cypress Assertion-ը:

Cypress-ը օգտագործում և փաթաթում է Chai-ի պնդման գրադարանը և ընդլայնումները, ինչպիսիք են Sinon-ը և JQuery-ը: Cypress-ը ավտոմատ կերպով սպասում է և նորից փորձում, մինչև պնդումը լուծվի: Պնդումները կարող են օգտագործվել նկարագրելու համար, թե ինչպիսին պետք է լինի դիմումը: Մենք կարող ենք օգտագործել Cypress պնդումները սպասումների համակցությամբ, նորից փորձել, արգելափակել մինչև այն հասնի ցանկալի վիճակին:

Cypress Assert Text

Ընդհանուր անգլերենում, մենք կնկարագրենք նման պնդումը. Ես կակնկալեի, որ կոճակը կունենա մուտքի տեքստ. Նույն պնդումը կարելի է գրել Cypress-ում, ինչպես

cy.get('button').should('have.value', 'login')

Վերոնշյալ պնդումը կանցնի, եթե կոճակը ունենա «մուտք» արժեք:

Cypress Ընդհանուր պնդումներ

Կան մի շարք ընդհանուր Cypress պնդումներ, որոնք մենք օգտագործում ենք մեր փորձարկման դեպքերում: Մենք դրանք կօգտագործենք .should() . Եկեք նայենք օգտագործման գործին և օրինակներին:

Կիպրոսի ընդհանուր պնդումներից մի քանիսը թվարկված են ստորև

  1. Երկարություն
  2. Արժեք
  3. Տեքստի համատեքստ
  4. Դաս
  5. Գոյություն
  6. CSS
  7. Տեսանելիություն
  8. պետական
  9. Հաշմանդամ գույք

Cypress Length պնդումը

length() կստուգի, արդյոք տվյալ տարրը երկարություն ունի

cy.get('dropdown').should('have.length', 5)

Cypress արժեքի հաստատում

Cypress արժեքը կհաստատի, եթե կոնկրետ տարրն ունի ակնկալվող արժեքը

cy.get('textfield').should('have.value', 'first name')

Cypress Տեքստի համատեքստի պնդում

Տեքստի համատեքստը կհաստատի, եթե տարրն ունի կոնկրետ տեքստ

cy.get('#user-name').should('have.text', 'John Doe')

Cypress դասի պնդում

Հաստատում է՝ արդյոք դասը ներկա է, թե կոնկրետ տարրը պետք է ունենա դասը

cy.get('form').find('input').should('have.class', 'disabled')

Cypress գոյության պնդում

Existence հրամանը ստուգում է՝ արդյոք տվյալ տարրը առկա է կամ գոյություն ունի DOM-ում, թե ոչ

cy.get('#button').should('exist')

Cypress CSS պնդում

CSS Assertion-ը ստուգում է, թե արդյոք որոշակի տարրերն ունեն որոշակի հատկություն

cy.get('.completed').should('have.css', 'text-decoration', 'line-through')

Cypress տեսանելիության պնդում

Cypress Visibility Assertion-ը հաստատում է, թե արդյոք DOM տարրը տեսանելի է UI-ում

cy.get('#form-submit').should('be.visible')

Cypress պետական ​​պնդում

Հաստատում է DOM տարրի վիճակը

cy.get(':radio').should('be.checked')

Cypress հաշմանդամների սեփականության հաստատում

Cypress Disabled սեփականության պնդումը հաստատում է, թե արդյոք տարրն անջատված է

cy.get('#example-input').should('be.disabled')

Cypress Կրկին փորձեք պնդում

Մեկ հրամանը, որին հաջորդում է պնդումը, կկատարվի հերթականությամբ: Սկզբում հրամանը կատարվում է, այնուհետև պնդումը կկատարվի: Մեկ հրամանը, որին հաջորդում են բազմաթիվ պնդումներ, նույնպես կկատարվի հերթականությամբ՝ համապատասխանաբար առաջին և երկրորդ պնդումը: Այսպիսով, երբ առաջին պնդումն անցնի, առաջին և երկրորդ պնդումը կրկին կկատարվեն հրամանների հետ միասին:

Օրինակ, ստորև նշված հրամանը պարունակում է երկուսն էլ .should() և .and() պնդման հրամաններ, որտեղ .and() այլ կերպ հայտնի է որպես .should()

cy.get('.todo-list li') // command
  .should('have.length', 2) // assertion
  .and(($li) => {
    // 2 more assertions
    expect($li.get(0).textContent, 'first item').to.equal('todo A')
    expect($li.get(1).textContent, 'second item').to.equal('todo B')
  })

Cypress Assertion Օրինակներ

Այս բաժնում մենք կքննարկենք Cypress-ի տարբեր տեսակի պնդումները, ինչպիսիք են

  • Անուղղակի պնդում
  • Հստակ պնդում

Մենք մանրամասնորեն կանդրադառնանք երկու տեսակների օրինակներին

Անուղղակի պնդում կիպարիսում

Անուղղակի պնդման մեջ մենք օգտագործում ենք .should() or .and() հրամաններ. Այս պնդման հրամանները կիրառվում են հրամանների շղթայում ներկայումս տրված առարկայի նկատմամբ: Նրանք կախված են նախկինում ստացված առարկայից:

Մենք կանդրադառնանք օրինակին, թե ինչպես օգտագործել .should() or .and() հրամաններ

cy.get('button').should('have.class', 'enabled')

հետ .and() որը հանդիսանում է այլանուն .should() , մենք կարող ենք շղթայել բազմաթիվ պնդումներ: Այս հրամաններն ավելի ընթեռնելի են:

cy.get('#title')
  .should('have.class', 'active')
  .and('have.attr', 'href', '/post')

Վերոնշյալ օրինակը շղթայված է .should() նշելով, որ այն պետք է ունենա «ակտիվ» դասը, որին հաջորդում է .and() կատարվում է նույն հրամանի դեմ։ Սա շատ օգտակար է, երբ մենք ցանկանում ենք մի քանի հրամաններ հաստատել:

Բացահայտ պնդում կիպրոսում

Պնդումներում բացահայտ առարկայի փոխանցումը պատկանում է Cypress-ի բացահայտ տիպին: Այստեղ մենք կօգտագործենք expect և assert հրամանները որպես պնդում. Բացահայտ պնդումները օգտագործվում են, երբ մենք ցանկանում ենք օգտագործել մի քանի պնդումներ նույն առարկայի համար: Մենք նաև օգտագործում ենք բացահայտ պնդումներ Cypress, երբ մենք ուզում ենք անել մաքսային տրամաբանությունը նախքան պնդումը.

Մենք կանդրադառնանք օրինակ բացահայտ Cypress-ի համար պնդում

expect(true).to.be.true //checks for a boolean

expect(object).to.equal(object)

Բացասական Cypress պնդում

Նմանապես, ինչպես դրական պնդումները, կան բացասական պնդումներ Cypress-ում: Մենք կօգտագործենք «ոչ» հիմնաբառը, որը ավելացվել է պնդման հայտարարության նախածանցին: Տեսնենք բացասական պնդման օրինակ

cy.get('#loading').should('not.be.visible')

Բացասական պնդումը խորհուրդ է տրվում միայն այն դեպքերում, երբ հաստատվում է, որ կոնկրետ պայմանն այլևս հասանելի չէ հավելվածի կողմից կոնկրետ գործողություն կատարելուց հետո:

Օրինակ, եկեք հաշվի առնենք, որ անջատիչը ստուգված է և ստուգենք, որ այն հեռացվել է

// at first the item is marked completed
cy.contains('li.todo', 'Write tests')
  .should('have.class', 'completed')
  .find('.toggle')
  .click()

// the CSS class has been removed
cy.contains('li.todo', 'Write tests').should('not.have.class', 'completed')

Cypress Custom Assertion Message

Cypress-ի միջոցով մենք կարող ենք լրացուցիչ տեղեկատվություն կամ հատուկ հաղորդագրություն տրամադրել պնդումների համար՝ օգտագործելով համընկնումների գրադարանը: Matchers-ը բաղկացած է փոքր գործառույթներից, որոնք տարբերում են արժեքները և կուղարկեն մանրամասն սխալի հաղորդագրություն: Chai պնդումների գրադարանը կօգնի մեր կոդը ավելի ընթեռնելի տեսք ունենալ, իսկ փորձարկման ձախողումը շատ օգտակար

const expect = require('chai').expect

it('checks a number', () => {
  const value = 10
  const expected = 3
  expect(value).to.equal(expected)
})
Cypress Custom Error հաղորդագրություն

Cypress Assertion-ի լավագույն փորձը

Մենք կարող ենք գրել բազմաթիվ պնդումներ մեկ բլոկում՝ օգտագործելով հրամանների շղթա: Պարտադիր չէ գրել մեկ պնդում, ինչպես միավորի թեստերում: Շատերը գրում են պնդումներ, ինչպես ստորև. Այդպես գրելը նորմալ է, բայց դա մեծացնում է կոդի գիծը և ավելորդությունը:

describe('my form', () => {
  before(() => {
    cy.visit('/users/new')
    cy.get('#first').type('ashok')
  })

  it('has validation attribute', () => {
    cy.get('#first').should('have.attr', 'data-validation', 'required') // asserting whether the #first has required field
  })

  it('has active class', () => {
    cy.get('#first').should('have.class', 'active') // asserting whether the #first has active class
  })

  it('has formatted first name', () => {
    cy.get('#first').should('have.value', 'Ashok') // asserting whether the #first has capitalized first letter
  })
})

Ինչպես տեսնում եք վերևում, նույն ընտրիչը և պնդման տեսակը կրկնվում են: Փոխարենը, մենք կարող ենք շղթայել այս հրամանները մեկ հաստատման մեջ, որն իրականացնում է բոլոր ստուգումները գծային ձևով:

describe('my form', () => {
  before(() => {
    cy.visit('/users/new')
  })

  it('validates and formats first name', () => {
    cy.get('#first')
      .type('ashok')
      .should('have.attr', 'data-validation', 'required')
      .and('have.class', 'active')
      .and('have.value', 'Ashok')
  })
})

Ինչպես նշվեց վերևում, մենք կարող ենք շղթայել մեկ ընտրիչը բազմաթիվ պնդումներով: Սա Cypress-ում պնդումներ գրելու առաջարկվող լավագույն փորձերից մեկն է:

Cypress-ում էջի օբյեկտի մոդելի մասին հասկանալու համար սեղմեք այստեղ.

Cypress Fixtures. գործնական իրականացում, օրինակ

Փորձարկման ավտոմատացման լավագույն փորձերից մեկը թեստի տվյալների բաժանումն է թեստային ֆայլերից: Այս ասպեկտը թեստային շրջանակը նախագծելիս առաջնային պահանջներից մեկն է: Cypress-ը մեզ օգնում է թեստի տվյալները առանձնացնելու ունակություններով Նոճի Ռադիո. Այս թեմայում մենք կքննարկենք Cypress հարմարանքներ գործնական իրականացման և իրական ժամանակի օրինակներով

նոճի հարմարանքներ

Բառը

Ի՞նչ է հարմարանքը Cypress-ում:

Cypress Fixtures-ը կարող է օգտագործվել տվյալների աղբյուր արտաքին ֆայլերից. Սարքավորումները Cypress-ում օգնում են ձեզ կարդալ կամ գրել ֆայլերի մեջ. Թեստային ավտոմատացման հայտնի շրջանակներից մեկը տվյալների վրա հիմնված շրջանակն է, որտեղ մենք տվյալները առանձնացնում ենք թեստային ֆայլերից: Մենք սովորաբար տվյալները պահում ենք արտաքին ֆայլերում, օրինակ՝ Excel-ում և կարդում դրանք՝ օգտագործելով արտաքին գրադարաններ: Cypress-ը մեզ տրամադրում է ֆայլերից տվյալները կարդալու նույն հնարավորությունը:

Cypress-ը մեզ տրամադրում է թղթապանակ, որը կոչվում է հարմարանքներ, որտեղ մենք կարող ենք ստեղծել JSON ֆայլեր և կարդալ այն տվյալները, որտեղ մենք կարող ենք կարդալ այդ ֆայլերը մի քանի թեստային ֆայլերում: Մենք կպահենք տվյալները որպես առանցքային արժեք զուգավորել և մուտք գործել դրանք:

Ինչպե՞ս օգտագործել Cypress Fixtures թեստերում:

Մենք կարող ենք մուտք գործել Cypress հարմարանքներ ստորև տրված հետևյալ շարահյուսության միջոցով

cy.fixture(filePath)
cy.fixture(filePath, encoding)
cy.fixture(filePath, options)
cy.fixture(filePath, encoding, options)

Մենք կհասկանանք այն պարամետրերը, որոնք կարող են փոխանցվել հարմարանքներում

ֆայլի ուղին - ուղին, որտեղ դուք պահել եք ձեր թեստի տվյալները

կոդավորում – Կոդավորումը, որն օգտագործվում է ֆայլ օգտագործելիս: Որոշ կոդավորումներ են ascii, base64, hex, երկուական և այլն

ընտրանքներ – Ընտրանքներում մենք կարող ենք անցնել timeout արձագանք. Այն պետք է նշի լուծվող ժամկետը cy.fixture ()

Ինչպե՞ս կարդալ տվյալներ Fixtures-ից Cypress-ում:

Մենք կսահմանենք թեստի տվյալները ֆայլի տակ՝ արմատուրա թղթապանակ. Մենք հասանելի կլինենք JSON ֆայլի թեստային տվյալներին թեստային սցենարում՝ օգտագործելով Cypress սարքերը:

Հիմա եկեք հասկանանք մի օրինակ Cypress-ի համար հարմարանքներ. Մենք մուտք ենք գործելու url՝ օգտագործելով օգտվողի անունը և գաղտնաբառը: Այսպիսով, եկեք պահենք օգտվողի անվան և գաղտնաբառի արժեքները ֆայլում:

Եկեք ստեղծենք ֆայլ անունով հավատարմագրերը.json հարմարանքների թղթապանակի տակ: Մենք կսահմանենք փոփոխականները JSON ձևաչափով:

{
    "username" : "admin@yourstore.com",
    "password" : "admin",
    "adminUrl" : "https://admin-demo.nopcommerce.com/admin/"
}
Հարմարավետ ֆայլի օրինակ

Արժեքների մուտքը Fixture ֆայլից դեպի փորձնական ֆայլ

Քանի որ մենք սահմանել ենք մեր JSON արժեքները հավատարմագրերը.json ֆայլ, մենք կտեսնենք, թե ինչպես կարող ենք դրանք մուտք գործել մեր թեստային ֆայլում՝ օգտագործելով Cypress սարքերը:

Մենք մուտք գործելու ենք հարմարանքների տվյալները՝ օգտագործելով this բանալի բառ նախքան կեռիկի մեջ

describe("Cypress Fixtures Example", function () {

    before(function () {
        cy.fixture('credentials').then(function (testdata) {
            this.testdata = testdata
        })
    })
})

Վերոնշյալ օրինակում մենք մուտք ենք գործում մեր JSON ֆայլը միջոցով cy.fixture ('հավատարմագրեր'). Քանի որ մեր JSON ֆայլի անունը հավատարմագրերը.json, մենք ենք փոխանցելով ֆայլի անունը cy.fixture()-ում. Այժմ մենք օգտագործում ենք alias հայեցակարգը և սահմանում ենք մեր տվյալները որպես թեստի տվյալները. Փոփոխականի հետ թեստի տվյալները, մենք կարող ենք օգտագործել օգտվողի անվան և գաղտնաբառի արժեքները մեր թեստային ֆայլում

describe("Cypress Fixtures Example", function () {

    before(function () {
        cy.fixture('credentials').then(function (testdata) {
            this.testdata = testdata
        })
    })
    it("Login with valid credentials", function () {
        cy.visit(this.testdata.adminUrl)
        cy.get('[id=Email]').clear()
        cy.get('[id=Email]').type(this.testdata.username)
        cy.get('[id=Password]').clear()
        cy.get('[id=Password]').type(this.testdata.password)
        cy.get('[type=submit]').click();

        cy.url().should('be.equal', this.testdata.adminUrl)
    });
});

Ինչպես տեսնում եք վերևում, ներս .type() մենք փոխանցում ենք արժեքը մեր credentials.json ֆայլից որպես this.testdata.username. Նմանապես, գաղտնաբառի համար մենք մուտք ենք գործում արժեքը՝ օգտագործելով this.testdata.password. url-ի համար մենք օգտագործում ենք նույն կերպ, ինչ օգտանունը և գաղտնաբառը:

Երբ մենք գործարկում ենք փորձնական գործը, դուք կարող եք տեսնել, որ արժեքը տպագրվում է վահանակում: Այս կերպ, մենք կատարել ենք մեր փորձնական դեպքը՝ օգտագործելով Cypress Fixtures

Հարմարավետության թեստի արդյունք

Cypress Multiple Fixtures

Այս բաժնում մենք կհասկանանք, թե ինչպես օգտագործել Cypress Fixtures-ը բազմաթիվ հարմարանքների ֆայլերով:

Եթե ​​մենք ցանկանում ենք օգտագործել տարբեր սարքերի տվյալներ նույն թեստային ֆայլի համար, օրինակ, կան երկու հավատարմագրեր, որոնք մենք պետք է ստուգենք մուտքի էջի համար, ինչպե՞ս կարող ենք մուտք գործել ֆայլեր:

Ճանապարհներից մեկը բազմակի գրելն է it բլոկներ, որոնք նորից ու նորից կկրկնօրինակեն նույն կոդը: Մյուս ճանապարհը, մենք կարող ենք օգտագործել Cypress հարմարանքներ տարբեր թեստ մուտք գործելու համար տվյալները հատուկ ֆայլում: Տեսնենք, թե ինչպես կարող ենք հասնել դրան՝ օգտագործելով Cypress հարմարանքները

Մենք արդեն ունենք հարմարանքային ֆայլ, որը կոչվում է հավատարմագրերը.json.

{
    "username" : "admin@yourstore.com",
    "password" : "admin",
    "adminUrl" : "https://admin-demo.nopcommerce.com/admin/"
}

Այժմ եկեք ստեղծենք մեկ այլ սարքի ֆայլ անունով userData.json որտեղ մենք կօգտագործենք տարբեր անվավեր օգտանուն և գաղտնաբառ:

{
    "username" : "user@yourstore.com",
    "password" : "user",
    "adminUrl" : "https://admin-demo.nopcommerce.com/admin/"
}

Այժմ տեսնենք, թե ինչպես կարող ենք մուտք գործել մեր թեստային ֆայլի երկու տարբեր տվյալներ:

Մենք կվերափոխենք նույն փորձնական ֆայլը՝ օգտագործելով երկու տարբեր հարմարանքների ֆայլեր օգտագործելու պայմանը:

const testValueFixtures = [
    {
        "name": "credentials",
        "context": "1"
    },
    {
        "name": "userData",
        "context": "2"
    }
]

describe('Automation Test Suite - Fixtures', function () {
    //looping through both the fixtues 
    testValueFixtures.forEach((fixtureData) => {
        describe(fixtureData.context, () => {
            // accessing the test data from the fixture file
            before(function () {
                cy.fixture(fixtureData.name).then(function (testData) {
                    this.testData = testData;
                })
            })
            it("login", function () {
                cy.visit('https://admin-demo.nopcommerce.com/admin/')
                cy.get('[id=Email]').clear()
                cy.get('[id=Email]').type(this.testData.username)
                cy.get('[id=Password]').clear()
                cy.get('[id=Password]').type(this.testData.password)
                cy.get('[type=submit]').click();

                cy.url().should('be.equal', this.testData.adminUrl)

            })
        })
    })
})
Մուտք գործելու երկու հարմարանքների տվյալների օրինակ

Սկզբում մենք ստեղծում ենք փոփոխական, որը կոչվում է testValueFixtures որպես դասավորություն որտեղ մենք ստեղծում ենք երկու հարմարանքային ֆայլերի համատեքստ: Առաջին համատեքստում մենք անվանումը փոխանցում ենք որպես «Լիազորագիր«և երկրորդը որպես»օգտվողի տվյալներ' , քանի որ դրանք ներկայացնում են մեր JSON ֆայլի անունները, որտեղ մեր արժեքը սահմանված է:

Երկրորդ, մենք պտտվում ենք նկարագրության բլոկի երկու հարմարանքների փոփոխականների միջով: Եվ ինչպես մենք նախկինում քննարկեցինք, մենք մուտք ենք գործում տվյալներ նախքան արգելափակումը օգտագործելը .this()

Մնացած կոդը նույնն է, որտեղ մենք փոխանցում ենք տվյալները cy.get()

Երբ մենք կատարենք մեր թեստը, այն կաշխատի երկու հավաքածուով, որտեղ առաջին դեպքն անցնում է վավեր հավատարմագրերով, իսկ երկրորդը ձախողվում է անվավեր հավատարմագրերի պատճառով:

Սարքավորում՝ օգտագործելով առաջին սարքի ֆայլը

Ինչպես տեսնում եք վերևում, լուսանկարում, առաջին փորձնական դեպքն անցել է և այն մուտքագրել է արժեքը առաջին սարքի ֆայլից հավատարմագրերը.json

Հարմարեցման օրինակ՝ օգտագործելով երկրորդ սարքի ֆայլը

Ինչպես տեսնում եք վերը նշված սքրինշոթում, թեստը ձախողվել է, և անցած արժեքները երկրորդ սարքավորման ֆայլից են userData.json

Դուք կարող եք նաև դիտել, թե ինչպես գրել Cypress-ի հարմարանքները՝ օգտագործելով Page Object Model-ը այստեղ

Cypress հրամաններ և Cypress հատուկ հրամաններ: HandsOn

Cypress հրաման

Բառը

Ի՞նչ է Cypress Commands-ը:

Cypress-ը մեզ տրամադրում է API-ներ և մեթոդներ՝ հավելվածի UI-ի հետ փոխազդելու համար: Դրանք հայտնի են որպես Cypress Commands և օգնում են վեբ հավելվածի փոխազդեցությանը: Բոլոր հասանելի հրամաններն ունեն ներկառուցված մեթոդներ, և մենք կկանչենք մեթոդները միայն մեր թեստային դեպքերում: Cypress հրամանները նմանակում են նմանատիպ գործողություն օգտվողին, որը փորձում է գործողություններ կատարել հավելվածում:

UI փոխազդեցության հրամաններ, որոնք տրամադրվում են Cypress-ի կողմից

Կան Cypress-ի կողմից տրամադրված տարբեր հրամաններ, որոնք փոխազդում են UI-ի հետ: Մենք մանրամասն կանդրադառնանք բոլոր հրամանների ցանկին:

  • .սեղմել()
  • .dblclick()
  • .աջ սեղմում ()
  • .տիպ()
  • .clear()
  • .check()
  • .ապստուգել()
  • .ընտրել()
  • .trigger()

Cypress Սեղմեք հրամանը

.սեղմել() - Այս հրամանը պետք է սեղմել DOM-ի ցանկացած տարր:

Ստորև բերված են սեղմման հրամանի շարահյուսությունները

.click() 

.click(options) 

.click(position) 

.click(position, options) 

.click(xCoordinate, yCoordinate) 

.click(xCoordinate, yCoordinate, options) 

Ինչպես տեսնում եք վերևում, սեղմումն ընդունում է այնպիսի պարամետրեր, ինչպիսիք են տարբերակներ, դիրք, և համակարգում.

Ընտրանքներ

Հնարավոր տարբերակները, որոնք կարող են փոխանցվել սեղմելու համար են

ՏարբերակDefaultՆկարագրություն
altKeyսուտՄիացրեք Այլընտրանքային ստեղնը (Option Key Mac-ում), ինչպես optionKey
ctrlKeyսուտՄիացրեք կառավարման ստեղնը: Հայտնի է նաեւ որպես: controlKey.
metaKeyսուտԱկտիվացնում է մետա ստեղնը (Windows ստեղնը Windows-ում կամ հրամանի ստեղնը Mac-ում): Նաև՝ commandKeycmdKey.
shiftKeyսուտԱկտիվացնում է shift ստեղնը
մուտքճիշտՏպում է տեղեկամատյանները հրամանի տողում
ստիպելսուտԱյս տարբերակը ստիպում է գործողությունը և անջատում է գործողության սպասելը
բազմապատիկսուտՀաջորդաբար սեղմեք մի քանի տարրեր
timeoutdefaultCommandTimeoutԺամանակն է .click() սպասել նախքան ժամանակի վերջը լուծելը
սպասել Անիմացիաների համարսպասել Անիմացիաների համարՏարբերակ՝ սպասելու, որ տարրերն ավարտեն անիմացիան՝ նախքան հրամանը կատարելը
Ընտրանքներ սեղմեք

Պաշտոնները

Տարբեր տեսակի դիրքեր, որոնք կարող են փոխանցվել .click()-ին են

  • կենտրոն (անհոգություն)
  • դուրս
  • իրավունք
  • վերեւ
  • վերև ձախ
  • վերևի աջ
  • պատվանդան
  • ներքևի ձախ
  • ներքևի աջ

Օրինակ

cy.get('btn').click()  //clicking the button 

cy.get('btn').click({ force: true })  //clicking the button by passing the option 'force' as true

cy.get('btn').click('bottomRight') // clicking the button at the botton right position

cy.get('btn').click(10, 70, { force: true }) // clicking the button with position value and force true

Cypress Կրկնակի սեղմեք հրամանը

Կրկնակի սեղմումով կարելի է հասնել՝ օգտագործելով dblclick() շարահյուսություն Cypress-ում.

շարահյուսություն

.dblclick()
.dblclick(position)
.dblclick(x, y)
.dblclick(options)
.dblclick(position, options)
.dblclick(x, y, options)

Ընտրանքներ

.dblclick() ընդունում է բոլոր այն տարբերակները, որոնք ընդունվում են .click(). Ընտրանքները կարող եք գտնել վերը նշված բաժնում:

Պաշտոնները

Բոլոր հնարավոր պաշտոնները, որոնք նշված են .click() նաեւ մատչելի են dblclick(). Պաշտոնների ցանկը կարող եք գտնել վերը նշված բաժնում:

Օրինակ

cy.get('button').dblclick() // Double click on button

cy.focused().dblclick() // Double click on element with focus

cy.contains('Home').dblclick() // Double click on first element containing 'Home'

cy.get('button').dblclick('top') // Double click on the button on top position

cy.get('button').dblclick(30, 10) // Double click on the coordinates of 30 and 10

Cypress Աջ սեղմեք հրաման

Այս Cypress հրամանը աջ սեղմում է DOM տարրի վրա .rightclick() հրամանը չի բացի բրաուզերի համատեքստային ընտրացանկերը.rightclick() օգտագործվում է հավելվածում աջ սեղմման հետ կապված իրադարձությունների կառավարումը փորձարկելու համար, ինչպիսիք են contextmenu.

շարահյուսություն

.rightclick()
.rightclick(position)
.rightclick(options)
.rightclick(position, options)
.rightclick(x, y)
.rightclick(x, y, options)

Ընտրանքներ

Ինչպես տեսանք վերևում, բոլոր տարբերակները, որոնք ընդունվում են .click() հրամանը կարող է կազմաձևվել .rightclick() հրամանը նույնպես.

Պաշտոնները

Բոլոր հնարավոր պաշտոնները, որոնք կարող են փոխանցվել .rightclick() նույնն է, ինչ .click() վերը նշված.

Օրինակ

cy.get('.welcome').rightclick() // Right click on .welcome

cy.focused().rightclick() // Right click on element with focus

cy.contains('January').rightclick() // Right click on first element containing 'January'

cy.get('button').dblclick('topRight') // Double click on the button on top right position

cy.get('button').dblclick(80, 20) // Double click on the coordinates of 80 and 20

Cypress Type հրաման

.type() հրամանը արժեք է մուտքագրում DOM տարրի մեջ:

շարահյուսություն

.type(text)
.type(text, options)

Արձանագրություններ

.type() ընդունում է տողը որպես փաստարկ: Արժեքներն անցել են .type() կարող է ներառել ստորև տրված հատուկ նիշերի հաջորդականություններից որևէ մեկը:

ՀերթականությունNotes
{{}Մտնում է բառացի { հիմնական
{backspace}Ջնջում է նիշը կուրսորի աջից ձախ
{del}Հեռացնում է նիշը կուրսորի ձախից աջ
{downarrow}Կուրսորը տեղափոխում է ներքև
{end}Կուրսորը տեղափոխում է տողի վերջ
{enter}Մուտքագրում է Enter ստեղնը
{esc}Մուտքագրում է Escape ստեղնը
{home}Կուրսորը տեղափոխում է տողի սկիզբ
{insert}Տեղադրում է նիշը կուրսորի աջ կողմում
{leftarrow}Կուրսորը տեղափոխում է ձախ
{movetoend}Կուրսորը տեղափոխում է մուտքագրվող տարրի վերջ
{movetostart}Կուրսորը տեղափոխում է մուտքագրվող տարրի սկիզբ
{pagedown}Ոլորվում է ներքև
{pageup}Ոլորվում է դեպի վեր
{rightarrow}Կուրսորը տեղափոխում է աջ
{selectall}Ընտրում է ամբողջ տեքստը՝ ստեղծելով a selection range
{uparrow}Կուրսորը տեղափոխում է վերև

Ընտրանքներ

Մենք կարող ենք օբյեկտները փոխանցել որպես ընտրանքներ՝ փոփոխելու լռելյայն վարքագիծը .type()

ՏարբերակDefaultՆկարագրություն
delay10Յուրաքանչյուր ստեղնը սեղմելուց հետո ժամանակի հետաձգման տարբերակ
forcefalseՍտիպում է գործողությունը կատարել և անջատել սպասելով գործողության
logtrueՑուցադրում է տեղեկամատյանները Հրամանների մատյան
parseSpecialCharSequencestrueՎերլուծեք հատուկ նիշերը շրջապատված լարերի համար {}, Օրինակ, {esc}. Դուք կարող եք սահմանել տարբերակը false բառացի նիշերը մուտքագրելու համար.
releasetrueԱյս տարբերակը թույլ է տալիս միացնել փոփոխիչի ակտիվացումը հրամանների միջև
scrollBehaviorscrollBehaviorViewport-ի դիրքը, որտեղ տարրը պետք է ոլորվի մինչև որևէ հրաման կատարելը
timeoutdefaultCommandTimeoutԺամանակն է սպասել .type() հրամանը լուծել նախքան ժամանակի ավարտը
waitForAnimationswaitForAnimationsԱսել, թե արդյոք սպասել տարրերին ավարտել անիմացիան որևէ հրաման կատարելուց առաջ:
Տիպի հրամանի ընտրանքներ

Օրինակ

Եկեք տեսնենք օրինակներ .type() հրաման

cy.get('textarea').type('Hey there') // enter value in the text area

cy.get('body').type('{shift}') //enables the shift key

cy.get('body').type('{rightarrow}') //type event right arrow 

Cypress Clear հրաման

Clear հրամանը կջնջի արժեքները մուտքագրման տարածքում կամ տեքստային դաշտում:

շարահյուսություն

Հստակ հրամանի շարահյուսությունը հետևյալն է.

.clear()
.clear(options)

Ընտրանքներ

Մենք կդիտարկենք այն տարբերակները, որոնք կարող են փոխանցվել .clear() հրաման.

ՏարբերակDefaultՆկարագրություն
forcefalseՍա կստիպի գործողությանը և անջատում է գործողության սպասելը
logtrueՑույց է տալիս հրամանը Command log-ում
scrollBehaviorscrollBehaviorViewport-ի դիրքը, որտեղ տարրը պետք է ոլորվի մինչև հրամանը կատարելը
timeoutdefaultCommandTimeoutԱյս տարբերակը սպասելու ժամանակն է .clear() լուծել նախքան ժամանակ դուրս գալը
waitForAnimationswaitForAnimationsՍա կսպասի, որ տարրերն ավարտեն անիմացիան՝ նախքան հրամանը կատարելը:
Հստակ հրամանի տարբերակներ

Օրինակ

Եկեք նայենք օրինակներին՝ հստակ հրամանի համար

cy.get('[type="text"]').clear() // Clear input of type text

cy.get('textarea').type('Welcome!').clear() // Clear textarea 

cy.focused().clear() // Clear focused input/textarea

Cypress Check հրաման

Ստուգման հրամանը կստուգի կամ ավելի պարզ բառերով նշեք վանդակները կամ ռադիո կոճակները: Դուք կարող եք հեռացնել վանդակները կամ ռադիո կոճակները՝ օգտագործելով .uncheck() հրաման.

շարահյուսություն

Մենք կհասկանանք Cypress-ի ստուգման հրամանի շարահյուսությունը:

//Syntax for check command
.check()
.check(value)
.check(options)
.check(values, options)

//Syntax for uncheck command
.uncheck()
.uncheck(value)
.uncheck(options)
.uncheck(values, options)

Ընտրանքներ

Հնարավոր տարբերակները, որոնք կարող են փոխանցվել հրամանները ստուգելու/անջատելու համար, նույն տարբերակներն են, ինչ վերը թվարկված հստակ հրամանը

Օրինակ

Մենք կդիտարկենք այն օրինակը, թե ինչպես կարող ենք օգտագործել ստուգման և անջատման հրամանները:

cy.get('[type="checkbox"]').check() // Check checkbox element

cy.get('[type="radio"]').first().check() // Check first radio element

cy.get('[type="radio"]').check('Male') //Check the radio element which has Male

cy.get('[type="checkbox"]').uncheck() //Uncheck checkbox element

cy.get('[type="radio"]').uncheck()  //Uncheck the first radio element

cy.get('[type="checkbox"]').uncheck('Breakfast') // Uncheck the breakfast element

Cypress Ընտրեք հրաման

Select Cypress հրամանը թույլ է տալիս ընտրել տարրեր a հատկորոշել.

շարահյուսություն

Հետևյալը ընտրելու հրամանի շարահյուսությունն է

.select(value)
.select(values)
.select(value, options)
.select(values, options)

Ընտրանքներ

Մենք կարող ենք փոխանցել ընտրված հրամանի լռելյայն վարքագիծը փոփոխելու տարբերակները:

ՏարբերակDefaultՆկարագրություն
forcefalseԱյս տարբերակը ստիպում է գործողությունը կատարել և անջատում է գործողության սպասելը
logtrueՑուցադրում է տեղեկամատյանները Command log-ում և սահմանվում է որպես ճշմարիտ ըստ լռելյայն
timeoutdefaultCommandTimeoutԱյս տարբերակը սպասելու ժամանակն է .select() լուծել նախքան ժամանակ դուրս գալը
Ընտրեք հրամանի ընտրանքներ

Օրինակ

Եկեք նայենք ընտրելու հրամանի օրինակներին

cy.get('select').select('butterfly') // Select the 'butterfly' option

cy.get('select').select(0) // selects the element with 0 index

cy.get('select').select(['parrot', 'peacock']) //selects the parrot and peacock option

Cypress ձգան հրաման

Trigger հրամանը օգնում է գործարկել ցանկացած իրադարձություն տարրի վրա:

շարահյուսություն

Մենք կդիտարկենք շարահյուսությունը՝ ձգանման հրամանին մուտք գործելու համար

.trigger(eventName)
.trigger(eventName, position)
.trigger(eventName, x, y)
.trigger(eventName, position, options)
.trigger(eventName, options)
.trigger(eventName, x, y, options)

Տարբերակ

Trigger հրամանն ընդունում է բոլոր այն տարբերակները, որոնց համար նշված են .clear() հրաման. Բացի այդ, կան մի քանի տարբերակներ, որոնք մենք կարող ենք կարգավորել, որոնք թվարկված են ստորև:

ՏարբերակDefaultՆկարագրություն
bubblestrueԱրդյոք միջոցառումը պետք է փուչիկ լինի
cancelabletrueԱրդյոք միջոցառումը կարող է չեղարկվել
eventConstructorEventԻրադարձության օբյեկտ ստեղծելու կոնստրուկտորը (օրինակ MouseEvent, keyboardEvent)
Trigger հրամանի տարբերակ

Օրինակ

Եկեք օգտագործենք տարբեր եղանակներ .trigger() կոդով:

cy.get('a').trigger('mouseover') // Trigger mouseover event on a link

cy.get('.target').trigger('mousedown', { button: 0 }) //mousedown triggered at button 0

cy.get('button').trigger('mouseup', topRight, { bubbles: false }) //mouseup triggered on topRight position with setting bubble as false

Արդյո՞ք Cypress հրամանները համաժամեցված են:

Cypress-ի բոլոր հրամաններն ասինխրոն են: Նրանք հերթագրվում են կատարման համար ավելի ուշ ժամանակի ընթացքում և չեն սպասի հրամանների ավարտին: Cypress հրամանը որևէ բան չի անում իրենց կանչի պահին, փոխարենը պահում են այն ավելի ուշ կատարման համար: Դուք կարող եք հասկանալ Cypress-ի ասինխրոն վարքը այստեղ

Cypress Chainable Commans

Cypress-ում մենք կարող ենք օգտագործել մի շարք հրամաններ DOM-ի տարրերի հետ փոխազդելու համար: Հրամայական է հասկանալ, թե ինչպես է ներքին կարգով աշխատում հրամանների շղթան: Եթե ​​մենք շղթայակցում ենք հրամանները որոշակի տողում, ապա Cypress-ը կկատարի հրամանի շղթայի վրա հիմնված խոստում և կտա հրաման՝ հիմնված հաջորդ հրամանի թեմայի վրա, մինչև հրամանների շղթան ավարտվի կամ սխալ տեղի ունենա:

Cypress-ը մեզ թույլ է տալիս սեղմել տարրը կամ մուտքագրել տարրերի մեջ՝ օգտագործելով .click() or .type() հրամաններ՝ օգտագործելով տարրերը cy.get() or cy.contains(). Եկեք տեսնենք շղթայական հրամանների մի պարզ օրինակ

cy.get('textarea').type('How are you?')

Վերոնշյալ օրինակում cy.get() մի Cypress հրաման է և .type() ևս մեկ հրաման է, որտեղ մենք շղթայում ենք .type() հրամանը վրա cy.get() հրամանը, ասելով, որ մուտքագրի առարկան, որը ստացվում է cy.get() տարր. Նմանապես, մենք կարող ենք շղթայել բոլոր հրամանները, որոնք մենք քննարկեցինք վերևում:

Chaining Assertion Commands Cypress-ում

Cypress-ի միջոցով մի քանի հրամաններ շղթայելու նման մենք կարող ենք նաև շղթայել պնդումները հրամաններով: Պնդումները հրամաններ են, որոնք թույլ են տալիս նկարագրել Սպասվում է հայտի վիճակը կամ վարքագիծը: Cypress-ը կսպասի, մինչև տարրերը հասնեն ակնկալվող վիճակին, և թեստը կտապալվի, եթե պնդումները չանցնեն։ Մենք կտեսնենք, թե ինչպես կարող ենք օգտագործել շղթայական հրամանները տարրը պնդելու համար:

cy.get('button').should('be.disabled') //expect whether the button should be disabled

cy.get('form').should('have.class', 'form-vertical') //expect whether the form should have class as 'form-vertical'

cy.get('input').should('not.have.value', 'Name') // assert whether the input should not have the value 'Name'

Ինչպես վերը նշված է, մենք օգտագործում ենք cy.get() հրամանով և շղթայելով այն .should() պնդման հրաման՝ արդյունքի հիման վրա վարքագիծ ակնկալելու համար: Այս կերպ մենք կարող ենք օգտագործել շղթան պնդման հրամաններ Cypress-ում.

Cypress Custom Commans

Cypress-ը մեզ տրամադրում է API-ներ՝ մեր պահանջների հիման վրա հրամաններ ստեղծելու համար: Cypress մաքսային հրամանը նման է լռելյայն հրամաններին, որոնք նախկինում գոյություն ունեն, բացառությամբ այն օգտագործողի կողմից սահմանված. Հատուկ հրամանների միջոցով մենք կարող ենք խաղալ հրամանների հետ և շղթայել դրանք՝ հիմնվելով մեր գործածության վրա: Cypress-ի հատուկ հրամանները օգտակար են մեր աշխատանքային գործընթացում, եթե դուք պահանջում եք դրանք նորից ու նորից օգտագործել թեստերում:

Եկեք տեսնենք Cypress-ում նոր մաքսային հրաման ստեղծելու շարահյուսությունը:

Cypress.Commands.add(name, callbackFn)
Cypress.Commands.add(name, options, callbackFn)
Cypress.Commands.overwrite(name, callbackFn)

որտեղ փաստարկները հետևյալն են

անուն – Հրամանի անունը տողում, որը մենք ցանկանում ենք ավելացնել կամ վերագրել

հետադարձ զանգFn – Այս ֆունկցիան ընդունում է հրամանին փոխանցված արգումենտ

ընտրանքներ – Փոխանցեք ցանկացած ընտրանքային օբյեկտ՝ հրամանի վարքագիծը սահմանելու համար

Նշում Ընտրանքներն աջակցվում են միայն ավելացնելու հրամանների և մի աջակցեք վերագրանցման հրամաններին

ՏարբերակԸնդունում էDefaultՆկարագրություն
prevSubjectBooleanString or Arrayfalseսահմանում է, թե ինչպես վարվել նախկինում տրված առարկայի հետ:

Այն տարբերակները, որոնք prevSubject ընդունումները հետևյալն են

  • false - անտեսել նախորդ առարկաները (ծնող հրաման)
  • true - ընդունել նախորդ առարկաները (երեխայի հրամանը)
  • optional – անցեք՝ արդյոք ցանկանում եք սկսել նոր շղթա, թե օգտագործել գոյություն ունեցող շղթան (երկակի հրաման)

Ծնողի մաքսային հրամանը Cypress-ում

Մենք կտեսնենք, թե ինչպես ավելացնել ծնողական մաքսային հրամանը Cypress-ում: Ծնող հրամանը միշտ կսկսի հրամանների նոր շղթա, թեև դուք շղթայել եք նախորդ հրամանը: Նախկինում շղթայված հրամանը անտեսվելու է, և նոր հրամանը միշտ շղթայված կլինի: Որոշ ծնող հրամաններ են cy.visit(), cy.get(), cy.request(),cy.exec(), cy.route()

Օրինակ

Մենք կտեսնենք օրինակ, թե ինչպես կարելի է գրել ծնողական մաքսային հրաման Cypress-ում

Cypress.Commands.add('clickLink', (label) => {
  cy.get('a').contains(label).click()
})

//clicking the "Buy Now" link
cy.clickLink('Buy Now')

Վերոնշյալ օրինակում, 'սեղմեք Հղում«Մեր սովորական հրամանի անունն է։ Այն կփնտրի պիտակ. 2-րդ տողում հրամանը ստանում է «a', և փնտրեք պիտակ պարունակող հղումը և սեղմեք տարրը: cy.clickLink() կկատարի գործողությունը թեստային ֆայլում և սեղմում է «Գնել հիմա»Հղումը:

Երեխաների մաքսային հրաման կիպարիսում

Cypress-ում Child Custom հրամանները շղթայված են ծնողի կամ այլ երեխայի հրամանից: Նախորդ հրամանի առարկան կփոխանցվի հետ կանչելու գործառույթին:

Cypress հրամաններից մի քանիսը, որոնք կարող են շղթայվել որպես մանկական հրամաններ .click(), .trigger(), .should(), .find(), .as()

Օրինակ

Մենք կանդրադառնանք օրինակին, թե ինչպես շղթայել մանկական մաքսային հրամանը

Cypress.Commands.add('forceClick', {prevSubject: 'element'}, (subject, options) => {
  // wrap the existing subject and do something with it
  cy.wrap(subject).click({force:true})
})

//accessing the forceClick in the test file
cy.get("[data-test='panel-VALUES']").forceClick();

Վերոնշյալ օրինակում մենք անվանում ենք մեր հատուկ հրամանը որպես «forceClick'. Մենք փոխանցում ենք prevSubject արգումենտը տարրին և փաթաթում առկա առարկան: Հետ cy.wrap(), մենք ստիպողաբար սեղմում ենք թեման: Այնուհետև թեստային ֆայլում մենք մուտք ենք գործում հատուկ հրաման.forceClick' վրա cy.get() հրաման.

Կրկնակի հատուկ հրամաններ Cypress-ում

Կրկնակի մաքսային հրամանները հիբրիդ են ծնողի և երեխայի հրամանների միջև: Դուք կարող եք սկսել հրամանների նոր շղթա կամ անջատել գոյություն ունեցող հրամանը: Կրկնակի հրամանները օգտակար են, եթե մենք ցանկանում ենք, որ մեր հրամանը տարբեր ձևերով աշխատի առկա առարկայի հետ կամ առանց դրա:

Որոշ հրամաններ, որոնք կարող են օգտագործվել երկակի հրամանների համար cy.contains(), cy.screenshot(), cy.scrollTo(), cy.wait()

Օրինակ

Եկեք տեսնենք, թե ինչպես օգտագործել կրկնակի հատուկ հրամաններ

Cypress.Commands.add('getButton', {
  prevSubject: 'optional'
}, (subject) => {
  if (subject) {
   cy.get(subject).get('btn').its('button');
  } else {
    cy.get('btn').its('button');
  }
})

Որոշ դեպքերում մեզ կպահանջվի ստանալ տեքստի կոճակը՝ օգտագործելով getButton-ը, որը ձեռք կբերի տարրի ամբողջ կոճակը: Այժմ մենք կարող ենք օգտագործել getButton-ը շղթայելու համար ծնող տարրը կամ շղթայել երեխայի տարրը, որտեղ այն կարող է կանչել ծնողի տարրերը:

Քանի որ prevSubject կամընտիր է, մենք կարող ենք կամ փոխանցել թեման որպես արգումենտ կամ կանչել հրամանը առանց թեմայի թեստային ֆայլում, ինչպես ստորև

cy.getButton() // without the subject

cy.get('#loginBtn').getButton() // with the subject

Գոյություն ունեցող Cypress հրամանների վերագրում

Մենք կարող ենք վերագրանցել արդեն գոյություն ունեցող Cypress հրամանները և փոփոխել վարքագիծը, որպեսզի խուսափենք մեկ այլ հրաման ստեղծելուց, որը կփորձի օգտագործել սկզբնական հրամանը վերջում:

Բնօրինակ Cypress հրամաններից մի քանիսը, որոնք կարող են վերագրվել, են cy.visit(), cy.type(), cy.screenshot(), cy.contains()

Օրինակ

Եկեք տեսնենք մի օրինակ, թե ինչպես կարող ենք վերագրել գոյություն ունեցող Cypress-ը հրաման.

Cypress.Commands.overwrite('contains',
  (originalFn, subject, filter, text, options = {}) => {
    // determine if a filter argument was passed
    if (typeof text === 'object') {
      options = text
      text = filter
      filter = undefined
    }

    options.matchCase = false

    return originalFn(subject, filter, text, options)
  }
)

Ինչպես տեսանք վերևում, մենք օգտագործում ենք Cypress.Commands.overwrite գոյություն ունեցող Cypress հրամանը փոփոխելու համար: Մենք մեր սովորական հրամանն անվանում ենք այսպես contains և մենք փաստարկներ ենք փոխանցում՝ որոշելու, թե արդյոք ֆիլտրի արգումենտն անցել է:

Cypress ներմուծման հրամաններ

Այս բաժնում մենք կհասկանանք, թե ինչպես ներմուծել Cypress Commands:

Մենք պետք է ստեղծենք մեր Cypress մաքսային հրամանները cypress/support/commands.js ֆայլ։ Մենք կավելացնենք մաքսային հրամանները command.js ֆայլում և ներմուծենք մեր թեստային գործի ֆայլը՝ այն օգտագործելու համար:

Command.js ֆայլ

Cypress Պատվերով հրամաններ օրինակով

Մենք կհասկանանք, թե ինչպես ստեղծել հատուկ հրաման և օգտագործել այն մեր հատուկ ֆայլում իրական ժամանակի օրինակով:

Ինչպես տեսանք վերևում, մենք պետք է ավելացնենք նոր մաքսային հրամաններ տակ հրամաններ.js ֆայլ։ Այդ ֆայլում եկեք ավելացնենք հատուկ հրաման մուտք գործելու համար

Cypress.Commands.add("login", (username, password) => {
    //adding a new command named login
    cy.get('[id=Email]').clear();
    cy.get('[id=Email]').type(username);
    cy.get('[id=Password]').clear();
    cy.get('[id=Password]').type(password);
    cy.get('[type=submit]').click();
  });
Հատուկ հրամաններ command.js ֆայլում

Վերոնշյալ կոդում մենք անվանում ենք մեր հատուկ հրամանը որպես Նոր որոնում. Մաքսային հրամանի ներսում մենք ավելացրել ենք օգտվողի անվան դաշտը մաքրելու և տեքստային դաշտում արժեք մուտքագրելու քայլերը: Նմանապես, մենք մաքրում ենք դաշտը և գաղտնաբառի դաշտում ավելացնում ենք գաղտնաբառը: Ավելի ուշ մենք սեղմում ենք ուղարկել կոճակը: Սա պարզ մաքսային հրաման է, որն ընդունում է երկու փաստարկ՝ օգտանուն և գաղտնաբառ: Մենք կփոխանցենք օգտվողի անվան և գաղտնաբառի արժեքը մեր հատուկ ֆայլում:

Այժմ եկեք ստեղծենք հատուկ ֆայլ անունով customCommand.spec.js ինտեգրման թղթապանակի տակ: Մեր հատուկ ֆայլը կպարունակի հետևյալ կոդը

describe("Custom Commands Example", () => {
    it("should login using the custom commands", () => {
      cy.visit("https://admin-demo.nopcommerce.com/");
      cy.login("admin@yourstore.com", "admin");
      cy.url().should('be.equal', 'https://admin-demo.nopcommerce.com/admin/')
    });
  });
Spec ֆայլը մուտք է գործում հատուկ հրաման

Ինչպես տեսանք վերևում, մենք մուտք ենք գործում մեր սովորական հրամանը որպես cy.login() , որտեղ մենք փոխանցում ենք օգտվողի անվան և գաղտնաբառի արժեքները:

Cypress Custom Commands IntelliSense

IntelliSense-ը տրամադրում է կոդերի խելացի առաջարկներ IDE-ում կամ կոդերի խմբագրիչում անմիջապես մինչ մենք թեստեր ենք գրում: Այն օգնում է՝ ցույց տալով թռուցիկ, որը ցուցադրում է հրամանի սահմանումը, հղումը դեպի փաստաթղթերի էջը և կոդի օրինակները: Եթե ​​մենք օգտագործում ենք ցանկացած ժամանակակից կոդերի խմբագրիչ, ինչպիսին է Visual Studio Code-ը կամ IntellJ-ը, ապա IntelliSense-ը շատ օգտակար կլինի:

IntelliSense-ն օգտագործում է Typescript՝ շարահյուսությունը հասկանալու և ցուցադրելու համար: Եթե ​​մենք գրում ենք հատուկ հրամաններ և տրամադրում ենք TypeScript սահմանումներ հատուկ հրամանների համար, մենք կարող ենք օգտագործել եռակի կտրվածքը՝ IntelliSense-ը ցուցադրելու համար, նույնիսկ եթե մեր նախագիծն օգտագործում է միայն JavaScript:

IntelliSense-ը կարգավորելու համար մենք պետք է նկարագրենք կոդը cypress/support/index.d.ts ֆայլը.

// type definitions for Cypress object "cy"
/// <reference types="cypress" />

declare namespace Cypress {
    interface Chainable<Subject> {
      /**
       * Login with credentials
       * @example
       * cy.login(username,password)
       */
      login(username: String, password: String): Chainable<any>
    }
  }

Այժմ մենք պետք է տեղեկացնենք մեր հատուկ ֆայլերին, որ կան Typescript-ի որոշ սահմանումներ ինդեքս.դ.ց ֆայլ։ Այսպիսով, մեր հատուկ ֆայլի սկզբում ավելացրեք ստորև բերված կոդը, որպեսզի IntelliSense-ը մեզ առաջարկներ ներկայացնի:

// type definitions for custom commands like "login"
// will resolve to "cypress/support/index.d.ts"
// <reference types="../support" />
Առաջարկը տրամադրվել է IntelliSense-ի կողմից

Ինչպես տեսանք վերևում, IntelliSense-ը մեզ տրամադրում է այն փաստարկը, որը մենք տրամադրել ենք մեր command.js ֆայլում և օգնում է ավտոմատ լրացնել:

Քայլ առ քայլ էջ Օբյեկտի մոդել Cypress-ում օրինակներով

Էջի օբյեկտի մոդել, Սովորաբար հայտնի է որպես Pom, հայտնի օրինակ է ցանկացած ավտոմատացման շրջանակում: Էջի օբյեկտի մոդելը կարող է կիրառվել նաև Cypress-ում: Էջի օբյեկտի մոդելը բազմաթիվ առավելություններ ունի թեստային ավտոմատացման համար շրջանակ ստեղծելու համար, ինչպիսիք են կոդերի կրկնօրինակման կրճատումը և պահպանման և ընթերցանության բարձրացումը: Cypress-ը մեզ ճկունություն է տալիս՝ ներառելու Էջի օբյեկտի մոդելը թեստային սցենարում: Այս հոդվածում մենք կանդրադառնանք էջի օբյեկտի մոդելի ստեղծմանը Cypress քայլ օրինակներով քայլ առ քայլ.

cypress էջ օբյեկտի մոդելը
Cypress Page Object Model

Բովանդակություն:

Ի՞նչ է Էջի օբյեկտի մոդելը:

Էջի օբյեկտի մոդելը դիզայնի օրինակ է, որտեղ Էջի օբյեկտները առանձնացված են ավտոմատացման թեստային սցենարներից: Ավտոմատացման փորձարկումը մեզ տալիս է բազմաթիվ լծակներ, որոնք օգուտ են տալիս մեզ փորձարկման ժամանակ. այնուամենայնիվ, կան որոշ արդյունքներ, ինչպիսիք են կոդերի կրկնօրինակումը և պահպանման ռիսկի աճը, քանի որ նախագիծը մեծանում է: Եկեք մի օրինակով հասկանանք POM-ի նշանակությունը.

Հաշվի առեք, որ մենք ունենք բազմաթիվ էջեր մեր հավելվածում, ինչպիսիք են Մուտքի էջը, Գրանցման էջը և Գրքի թռիչքների էջը:

  • Մուտքի էջը պարունակում է մուտքի գործառույթների բոլոր վեբ տարրերը
  • Գրանցումը պարունակում է գրանցման գործընթացի բոլոր մեթոդներն ու վեբ տարրերը
  • Գրքի թռիչքները պարունակում են թռիչքների ամրագրման էջի վեբ տարրերը

Կան երեք փորձարկման դեպքեր, մասնավորապես TC1, TC2 և TC3:

  • TC1-ը պարունակում է մուտքի փորձարկման դեպքեր:
  • TC2-ը պարունակում է մուտքի և գրանցման թեստային դեպքեր
  • TC3-ը պարունակում է մուտքի, գրանցման և թռիչքների ամրագրման թեստային դեպքեր
Օրինակ առանց POM

Այժմ մուտքի էջը փոխազդում է TC1-ի հետ:

Գրանցման էջը պետք է փոխազդի TC1 և TC2, և

Թռիչքի ամրագրման էջը պետք է փոխազդի TC1, TC2 և TC3 հետ

Ինչպես տեսնում եք, բոլոր երեք փորձարկման դեպքերի միջև կան ընդհանուր գործառույթներ: Բոլոր թեստային գործի ֆայլերում մուտքի մեթոդներն ու տեղորոշիչները գրելու փոխարեն, մենք կարող ենք դրանք ունենալ առանձին և մուտք գործել դրանք ֆայլերում: Այս կերպ կոդը չի կրկնվում, և այն հեշտությամբ ընթեռնելի է։

Կոդավորման լավագույն փորձերից մեկը հասկացությունն է, որը կոչվում է DRY, Դա նշանակում է Ինքներդ ձեզ մի կրկնեք. Ինչպես հստակ ասում է ամբողջական ձևը, մենք չպետք է նորից ու նորից կրկնենք կոդի տողերը։ Սա հաղթահարելու համար, Էջի օբյեկտի մոդել կարևոր դեր է խաղում լավագույն կոդավորման պրակտիկայում:

Էջի օբյեկտի մոդելի շրջանակի ճարտարապետություն

The էջի օբյեկտի մոդելի շրջանակ ճարտարապետությունը ապացուցված ճարտարապետություն է, որը կարող է հարմարեցնել պարզ մեթոդներով: Այսօր գրեթե բոլոր ընկերությունները հետևում են արագաշարժ մեթոդաբանություններին, որոնք ներառում են շարունակական ինտեգրում, զարգացում և փորձարկում: Ավտոմատացման փորձարկիչները պահպանում են թեստային շրջանակը, որպեսզի աշխատեն զարգացման գործընթացին զուգահեռ Էջի օբյեկտի մոդել. Դա նշանակալի է նախագծման օրինաչափություն ավտոմատացման թեստային շրջանակը պահպանելու համար քանի որ կոդը աճում է նոր հնարավորություններով:

Էջի օբյեկտը դիզայնի օրինաչափություն է, որը օբյեկտի վրա հիմնված դաս է, որը փոխազդում է մեր փորձարկվող հավելվածի էջերի հետ։. Էջի օբյեկտը բաղկացած է Էջի դաս և Թեստային դեպքերԷջի դաս բաղկացած է վեբ տարրերի հետ փոխազդելու մեթոդներից և տեղորոշիչներից: Մենք ստեղծում ենք առանձին դասեր հավելվածի յուրաքանչյուր էջի համար: Մենք կստեղծենք անհատական ​​մեթոդներ յուրաքանչյուր ֆունկցիոնալության համար և մուտք կգործենք դրանք մեր հատուկ ֆայլում:

Էջի օբյեկտի մոդել

Cypress-ում Page Object Model-ի օգտագործման առավելությունները

  1. Մեթոդներն են վերամշակված ամբողջ ծրագրի ընթացքում և հեշտ է պահպանել, երբ նախագիծն աճում է: Կոդի տողերը դառնում են ավելի քիչ ընթեռնելի և օպտիմիզացված:
  2. Page Object Pattern-ն առաջարկում է, որ մենք առանձնացնենք գործառնություններ և հոսք որից մենք կատարում ենք UI-ում ստուգում քայլերը. Երբ մենք հետևում ենք POM օրինակին, մենք հակված ենք գրել մաքուր և հեշտ հասկանալի ծածկագիր.
  3. Էջի օբյեկտի մոդելով, օբյեկտները և փորձարկման դեպքեր միմյանցից անկախ են. Մենք կարող ենք զանգահարել օբյեկտները նախագծի ցանկացած կետում: Այս կերպ, եթե մենք օգտագործում ենք տարբեր գործիքներ, ինչպիսիք են TestNG/JUnit-ը ֆունկցիոնալ թեստավորման համար կամ վարունգը՝ ընդունման թեստավորման համար, ապա դա հեշտ է: մատչելի.

Քայլ առ քայլ էջ Object Model Cypress օրինակով

Այս բաժինը կհասկանա, թե ինչպես ստեղծել Էջի օբյեկտի մոդել Cypress իրական ժամանակի օրինակներով որոնք մենք կարող ենք իրականացնել նախագծերում։ Մենք կհասկանանք էջի օբյեկտի մոդելի ստեղծման հիմնական կարգավորումից և քայլ առ քայլ գործընթացից:

Եկեք քննարկենք այն սցենարը, որի վրա մենք կգրենք գործառույթները այս օրինակում:

  1. navigate to https://admin-demo.nopcommerce.com/ կայքը
  2. Մուտքագրեք վավեր օգտվողի անունը և գաղտնաբառը
  3. Սեղմեք Մուտք կոճակը
  4. Վավերացրեք URL-ը, թե արդյոք այն կցված է /admin մուտքից հետո

Մենք կստեղծենք երկու ֆայլ՝ մեկ PageObject ֆայլ և մեկ հատուկ ֆայլ այս օրինակի համար: Եկեք սկսենք:

Քայլ 1Բացեք մեր նախագիծը VS կոդով: Ստեղծեք թղթապանակ, որը կոչվում է Էջի օբյեկտ տակ ինտեգրում թղթապանակ. Այս թղթապանակում դուք կարող եք ստեղծել էջի օբյեկտի ֆայլեր ցանկացած մոդուլի համար:

PageObject անունով նոր թղթապանակ

Քայլ 2Ստեղծեք ֆայլ անունով LoginPage.js տակ Էջի օբյեկտ թղթապանակ. LoginPage.js-ում մենք կգրենք այն մեթոդները, որոնք ներառում են մուտքի գործառույթները:

LoginPage.js-ի ստեղծում PageObject պանակում

Քայլ 3Եկեք սկսենք գրել մեր առաջին փորձարկման մեթոդը LoginPage.js-ը ֆայլ։ Մենք պետք է նախ ստեղծենք դաս, որը մենք կարտահանենք մեր հատուկ ֆայլում: Մենք մեր դասարանը կանվանենք այսպես Մուտք էջ

class LoginPage {

}

Հիմնվելով մեր կեղծ կոդի վրա՝ մեր առաջին քայլը URL-ին նավարկելն է: Մենք մեր մեթոդը կանվանենք այսպես navigate(). Մեր նավիգացիոն մեթոդի ներսում մենք կավելացնենք cy.visit() ֆունկցիա Cypress-ից:

 navigate() {
        cy.visit('https://admin-demo.nopcommerce.com/')
    }

նավարկելու մեթոդ

Քայլ 4Այժմ մենք պետք է մուտքագրենք օգտվողի անունը մեր էլ.փոստի դաշտում: Մենք կանվանենք մեր մեթոդը այսպես enterEmail (). Նախ, մենք պետք է ստանանք էլփոստի դաշտի որոնիչը և մուտք գործենք դրանց միջոցով cy.get() հրաման. Այնուհետև մենք կմաքրենք դաշտը՝ օգտագործելով clear() հրամանը և ավելացրեք օգտվողի անունը՝ օգտագործելով type() հրաման. Մեր մեթոդով մենք փոխանցում ենք պարամետր օգտագործողի անունը արժեքը փոխանցելու համար հատուկ ֆայլում: Այսպիսով, մենք ընդհանուր ենք պահում այս մեթոդին մուտք գործելու համար, եթե այլ էլփոստի id պահանջվում է:

enterEmail(username) {
        cy.get('[id=Email]').clear()
        cy.get('[id=Email]').type(username);
        return this
    }

Գրելու փոխարեն cy.get() հրամանը երկու անգամ վերը նշված կոդում, մենք կարող ենք դրանք պարզապես պտտել կոճակով օժիտ օպերատոր

  enterEmail(username) {
        cy.get('[id=Email]')
            .clear()
            .type(username);
        return this
    }

enterEmail մեթոդը

Դուք կարող եք նկատել return this 9-րդ տողում. սա ցույց է տալիս, որ մուտքագրեք էլփոստ մեթոդը պատկանում է կոնկրետին Մուտք էջ դաս. Հիմնականում, սա ներկայացնում է դասարանը.

Քայլ 5Մենք պետք է ստեղծենք գաղտնաբառերի մեթոդ, որը նման է մեր enterEmail մեթոդին: Մենք կկոչենք մեր գաղտնաբառի մեթոդը այսպես enterPassword(). Սկզբում մենք կստանանք գաղտնաբառի որոնիչը, մաքրենք դաշտը և մուտքագրենք մուտքային արժեքը: Մենք կփոխանցենք պարամետր մեր մեթոդին, որը կոչվում է pswd և մուտքը դեպի type() հրաման.

enterPassword(pswd) {
    cy.get('[id=Password]')
        .clear()
        .type(pswd)
    return this
}
enterPassword մեթոդը

Քայլ 6Մեր վերջին մեթոդը կլինի մուտք գործելու կոճակի վրա սեղմելը: Մենք մեր մեթոդը կանվանենք այսպես submit(). Մենք կստանանք տեղորոշիչը և կտտացրեք կոճակը օգտագործելով click() մեթոդ Cypress-ից.

 submit() {
        cy.get('[type=submit]').click()
    }

ներկայացնելու եղանակը

Քայլ 7Այժմ մենք պետք է արտահանենք այս դասը, որպեսզի այն օգտագործենք մեր հատուկ ֆայլում: Դրա համար մենք պարզապես ավելացնում ենք մեկ տող մեր դասից դուրս, և մենք կարող ենք հեշտությամբ մուտք գործել այն մեր հատուկ ֆայլում:

export default LoginPage

արտահանման հրաման

Ուռա՜ Մենք ստեղծել ենք Page Object ֆայլ մեր նախագծի համար: Դա բավականին պարզ էր և հեշտ:

Մուտք գործեք էջի օբյեկտներ Spec ֆայլում

Այժմ եկեք անցնենք մեր փորձնական գործի ֆայլին: Մենք պետք է ստեղծենք հատուկ ֆայլ մեր ինտեգրման թղթապանակում: Մենք կկանչենք մեր հատուկ ֆայլը POMDemo.spec.js.

PODemo.spec.js ֆայլի ստեղծում

Քայլ 1LoginPage.js ֆայլում մեր մեթոդներին մուտք գործելու համար մենք պետք է ներմուծում դրանք մեր հատուկ ֆայլում: Մենք ներմուծում ենք ներմուծման հայտարարությունը օգտագործելով: Մենք պետք է նավարկենք դեպի LoginPage.js ֆայլ՝ օգտագործելով ../

Մեր դեպքում ճանապարհն է ../integration/PageObject/LoginPage. Այսպիսով, ներմուծման հայտարարությունը նման կլինի ստորև:

import LoginPage from "../integration/PageObject/LoginPage"

Քայլ 2Քանի որ մենք օգտագործում ենք Mocha, մենք կգրենք մեր փորձնական դեպքը ներսում describe() և it() արգելափակել. describe() ներկայացնում է a փորձարկման հավաքակազմ, և այն() ներկայացնում է a փորձարկման դեպք. Երկու բլոկներն էլ ֆունկցիա են և ընդունում են լարային պարամետր, որը ներառում է նկարագրություն թեստի.

describe("Cypress POM Test Suite", function () {
})

Նկարագրեք բլոկը

Նկարագրության բլոկի ներսում մենք կգրենք մեր it() ավելացնելով նկարագրությունը որպես վավեր հավատարմագրերով մուտք:

it("Login with valid credentials", function () {
       
    })

այն արգելափակում է

Քայլ 3Մեր Էջ օբյեկտի ֆայլից մեր մեթոդներին մուտք գործելու համար մենք պետք է ստեղծենք օրինակ մեր Login դասի համար: Մուտքի դասի համար օրինակ ստեղծելու համար մենք պետք է հայտարարենք փոփոխական և վերագրենք այն մեր դասի ֆայլին՝ օգտագործելով նոր հիմնաբառ. Հայտարարված փոփոխականով մենք կարող ենք հեշտությամբ մուտք գործել մեթոդներ Page object ֆայլից:

                                               const login = new LoginPage();
Դասի օրինակ

ՆշումՓոփոխականով login, մենք կարող ենք մուտք գործել մեթոդներ Page օբյեկտ դասից։ Երբ սկսում ենք մուտքագրել login. , vscode-ը ցույց կտա LoginPage.js ֆայլում առկա բոլոր մեթոդների առաջարկները: Սա օգնում է մեզ ստուգել, ​​որ մենք արտահանել և ներմուծել ենք մեր դասը ճիշտ:

Քայլ 4- Եկեք զանգենք մեր navigate() URL այցելելու մեթոդ: Սա մեր փորձնական գործի առաջին գործողությունն է:

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

import LoginPage from "./PageObject/LoginPage"

describe("Cypress POM Test Suite", function () {
    it("Login with valid credentials", function () {
        const login = new LoginPage();
        login.navigate();
    });
});

Քայլ 5Մենք պետք է մուտքագրենք օգտվողի անունը էլփոստի դաշտում: Մենք մուտք ենք գործում enterEmail() հետ Նոր որոնում առարկա: enterEmail() մեթոդը ընդունում է պարամետր օգտագործողի անունը. Այսպիսով, մենք պետք է փոխանցենք օգտվողի անվան արժեքը որպես a լարային մեր հատուկ ֆայլում

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

import LoginPage from "./PageObject/LoginPage"

describe("Cypress POM Test Suite", function () {
    it("Login with valid credentials", function () {
        const login = new LoginPage();
        login.navigate();
        login.enterEmail('admin@yourstore.com');
    })
})

Քայլ 65-րդ քայլի նման, մենք պետք է զանգահարենք մեր enterPassword() մեթոդը՝ գաղտնաբառը՝ որպես պարամետր, տողի մեջ:

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

import LoginPage from "./PageObject/LoginPage"

describe("Cypress POM Test Suite", function () {
    it("Login with valid credentials", function () {
        const login = new LoginPage();
        login.navigate();
        login.enterEmail('admin@yourstore.com');
        login.enterPassword('admin');
    })
})

Քայլ 7Հաջորդը, մենք պետք է սեղմենք մուտքի կոճակը: Մենք կանվանենք մեթոդը submit() մեր էջի օբյեկտի ֆայլից:

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

import LoginPage from "./PageObject/LoginPage"

describe("Cypress POM Test Suite", function () {
    it("Login with valid credentials", function () {
        const login = new LoginPage();
        login.navigate();
        login.enterEmail('admin@yourstore.com');
        login.enterPassword('admin');
        login.submit();
    })
})

Քայլ 8Մուտք գործելուց հետո մենք պետք է հաստատենք URL-ը: Մենք կստուգենք՝ արդյոք URL-ը կա հավասար հասցեին մուտք գործելուց հետո: Պնդման համար կօգտագործենք Չայը պնդումների գրադարան, որը ներկառուցված է Cypress-ով:

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

import LoginPage from "./PageObject/LoginPage"

describe("Cypress POM Test Suite", function () {
    it("Login with valid credentials", function () {
        const login = new LoginPage();
        login.navigate();
        login.enterEmail('admin@yourstore.com');
        login.enterPassword('admin');
        login.submit();
        cy.url().should('be.equal', 'https://admin-demo.nopcommerce.com/admin/')
    })
})

Մուտք գործելու փորձնական դեպք

Վերևի պատկերը ներկայացնում է մուտքի փորձարկման դեպքը: Մենք կարողացանք փորձնական դեպք գրել Էջի օբյեկտի մոդելով շատ քիչ պարզ քայլերով: Հիմա եկեք գործարկենք թեստը և տեսնենք արդյունքը:

Մենք կբացենք Cypress թեստային վազորդը և կտտացրեք սպեցիֆիկ ֆայլի վրա և գործարկենք մեր թեստային գործը: Ստուգիր սա հոդված թե ինչպես բացել Cypress թեստային վազորդը:

Փորձարկման արդյունք Cypress-ում

Ուռա՜ Մենք հաջողությամբ գրել ենք փորձնական դեպք, որն օգտագործում է Page Object Model Cypress-ում: Մենք կարող ենք այս օրինակը ներառել իրական ժամանակի նախագծերում: Կան բազմաթիվ եղանակներ, որոնցով մենք կարող ենք գրել մեթոդները էջի օբյեկտի ֆայլում: Ես ձեզ ցույց տվեցի մի օրինակ, որը ստանդարտ է և աշխատում է ցանկացած նախագծի համար: Կարող եք նաև գրել միայն վերադարձի գործառույթ էջի օբյեկտի ֆայլում, այնուհետև սեղմեք և տիպ ուղղակիորեն մեր հատուկ ֆայլում:

Մենք կտեսնենք մեկ այլ օրինակ, որը մենք կարող ենք օգտագործել նախագծում: Այս մեթոդը նույնպես հիանալի կաշխատի:

Այս տեսակի դեպքում մենք կվերադարձնենք միայն տեղորոշիչ գործառույթը մեր մեթոդում և գործողություններ կկատարենք թեստային ֆայլում: Մենք կոդ կգրենք նույն սցենարի համար, որը տեսանք վերևում։

Էջի օբյեկտ – LoginPage.js

class LoginPage {
    navigate() {
        cy.visit('https://admin-demo.nopcommerce.com/')
    }

    enterEmail() {
        return cy.get('[id=Email]')
    }

    enterPassword() {
        return cy.get('[id=Password]')

    }

    submit() {
        return cy.get('[type=submit]')
    }
}
export default LoginPage

Ինչպես տեսանք վերևում, մենք գրում ենք միայն տեղորոշիչը մեր ֆունկցիայի ներսում և վերադարձնում դրանք։ Վերադարձը ցույց է տալիս, որ կոնկրետ մեթոդը պատկանում է դասի LoginPage.js. Մենք ոչ մի գործողություն չենք ավելացնում մեր մեթոդներում:

Էջի օբյեկտի ֆայլի օրինակ

Spec File – PODemo.spec.js

Մենք կդիտարկենք հատուկ ֆայլի մեթոդներին մուտք գործելու օրինակը:

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

import LoginPage from "./PageObject/LoginPage"

describe("Cypress POM Test Suite", function () {
    it("Login with valid credentials", function () {
        const login = new LoginPage();
        login.navigate();
        login.enterEmail().clear()
        login.enterEmail().type('admin@yourstore.com');
        login.enterPassword().clear()
        login.enterPassword().type('admin');
        login.submit().click();
        cy.url().should('be.equal', 'https://admin-demo.nopcommerce.com/admin/')
    });
});

Spec ֆայլի օրինակ

Այստեղ մենք կանչում ենք մեթոդը PageObject ֆայլից և կատարում ենք թեստային գործի գործողությունները: Այսպիսով, առաջին հերթին մենք կոչում ենք մեր հղման փոփոխականը Նոր որոնում այնուհետև այն կցելով մեթոդով enterEmail() և վերջապես կցելով գործողությունը տիպ. Մեր մեջ type(), մենք փոխանցում ենք օգտանունը արժեք.

test արդյունք

Ինչպես տեսնում եք, բոլոր հրամանները կատարվել են, և թեստն անցել է:

Դուք կարող եք ընտրել էջի օբյեկտի մոդելը, որը համապատասխանում է ձեր նախագծին և ձեր կարծիքին: Միայն մեկ ընթացակարգին հավատարիմ մնալու հատուկ կանոն չկա:

Ինչպե՞ս օգտագործել Fixtures-ը որպես փորձարկման տվյալների աղբյուր Cypress-ում էջի օբյեկտի մոդելում:

Մեր Էջի օբյեկտի մոդելի օրինակներում մենք փոխանցել ենք օգտանունը և գաղտնաբառի արժեքը անմիջապես կամ Page Object ֆայլում կամ անմիջապես թեստային գործի ֆայլում: Այս բաժինը կհասկանա, թե ինչպես օգտագործել հարմարանքներ Cypress-ում տվյալների անվտանգ և չբացահայտված պահելու համար: Մենք պետք է փորձենք բոլոր հավատարմագրերն ու տվյալները պահել մեկ ֆայլում և մուտք գործել դրանց: Այսպիսով, այն հեշտ է պահպանել, և զգայուն տվյալները, ինչպիսիք են օգտվողի անունը և գաղտնաբառը, չեն բացահայտվում: Այս մեթոդը նաև այն ընթացակարգերից է, որին մենք պետք է հետևենք Page Object Pattern-ում:

Ինչպես քննարկվել է ավելի վաղ, Fixture-ն օգնում է տվյալները պահել JSON ֆայլում կամ excel ֆայլում կամ արտաքին գրադարանում, ինչպիսին է Apache POI-ն:. Մենք կօգտագործենք այս տվյալները՝ ստեղծելով փոփոխական և մուտք գործենք դրանք մեր հատուկ ֆայլում: Եկեք հասկանանք օրինակով.

Cypress-ը տրամադրում է թղթապանակ, որը կոչվում է «հարմարանքներ»: Մենք կստեղծենք ա JSON կանչված ֆայլը Լիազորագիր.json «Լրացուցիչ» թղթապանակի տակ:

JSON ֆայլի ստեղծում

Եկեք հայտարարենք մեր օգտվողի անունը, գաղտնաբառը և URL արժեքները, որոնք մենք պետք է վավերացնենք JSON ձևաչափով հավատարմագրերը.json ֆայլը.

{
    "username" : "admin@yourstore.com",
    "password" : "admin",
    "adminUrl" : "https://admin-demo.nopcommerce.com/admin/"
}

Արժեքների փոխանցում credentials.json ֆայլում

Մուտք գործեք JSON ֆայլի արժեքները փորձարկման գործի ֆայլում

Քանի որ մենք սահմանել ենք արժեքները մեր JSON ֆայլում, մենք դրանք մուտք կունենանք մեր փորձնական գործի ֆայլում՝ օգտագործելով Ռադիո Cypress-ից։ Մենք մուտք գործելու ենք JSON արժեքը սա հիմնաբառ. Փաթաթենք ֆիքսատորի ֆունկցիան a նախքան () բլոկ

describe("Cypress POM Test Suite", function () {
 
before(function () {
        cy.fixture('credentials').then(function (testdata) {
            this.testdata = testdata
        })
})

cy.fixture ('հավատարմագրեր').then (function (testdata) { this.testdata = testdata }) - այս տողը ցույց է տալիս, որ մենք անցնում ենք հավատարմագրերը.json ֆայլը որպես պարամետր մեր cy.fixture () հրաման. Այստեղ մեզանից չի պահանջվում փոխանցել՝ արդյոք դա JSON ֆայլ է: Պարզապես փոխանցեք ֆայլի անունը միայնակ: Ավելի ուշ անցնում ենք թեստի տվյալները որպես ֆունկցիայի պարամետր և մուտք գործել թեստի տվյալները փոփոխական օգտագործելով սա.

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

import LoginPage from "./PageObject/LoginPage"

describe("Cypress POM Test Suite", function () {

    before(function () {
        cy.fixture('credentials').then(function (testdata) {
            this.testdata = testdata
        })
    })
    it("Login with valid credentials", function () {
        const login = new LoginPage();
        login.navigate();
        login.enterEmail(this.testdata.username)
        login.enterPassword(this.testdata.password)
        login.submit();
        cy.url().should('be.equal', this.testdata.adminUrl)
    });
});

login.enterEmail(this.testdata.username) – Սա կվերցնի օգտվողի անվան արժեքը credentials.json ֆայլից և լրացնելու այն էլփոստի դաշտում:

login.enterPassword(this.testdata.password) – Սա կվերցնի գաղտնաբառի արժեքը credentials.json ֆայլից և կլրացնի այն գաղտնաբառի դաշտում

cy.url().should('be.equal', this.testdata.adminUrl) – Սա կստանա adminUrl-ը credentials.json ֆայլից և կհաստատի պնդումներում

JSON ֆայլից տվյալների փոխանցում հատուկ ֆայլին

Հիմա եկեք գործարկենք թեստը արդյունքի համար:

Թեստի արդյունքը

Ինչպես տեսնում ենք, թեստային գործերը կատարվել են և անցել։ Այս օրինակը կօգնի ձեզ գրել տվյալների վրա հիմնված հիմնական թեստային դեպք: Դուք կարող եք այն ներառել ձեր նախագծում՝ օգտագործելով այս մեթոդը: Դուք կարող եք ստեղծել նոր JSON ֆայլեր Fixture թղթապանակում, ավելացնել արժեքներ՝ կապված թեստային տվյալների հետ և մուտք գործել դրանց ցանկացած փորձնական ֆայլ:

Հաճախակի տրվող հարցեր

Cypress-ն աջակցո՞ւմ է Page Object Model-ին:

Իհարկե. Cypress-ը տալիս է ամբողջ ճկունությունը պահեստի էջերի և առարկաների հետ խաղալու համար: Այն հեշտ է իրականացնել։

Էջի օբյեկտի ո՞ր մոդելը պետք է օգտագործեմ վերը նշված օրինակներից:

Էջի օբյեկտի մոդելի միայն մեկ եղանակին հավատարիմ մնալու հատուկ կանոն չկա: Դուք կարող եք օգտագործել ցանկացած մոդել, որը քննարկվել է վերևում: Դուք ազատ եք հարմարեցնել մոդելը ձեր նախագծին համապատասխան:

Ինչու՞ պետք է օգտագործեմ հարմարանքներ Cypress-ում Page Object Model-ում:

Fixture-ն օգնում է պահպանել այնպիսի զգայուն տվյալներ, ինչպիսիք են օգտանունը, գաղտնաբառը և URL-ները առանձին ֆայլերում, ինչպիսիք են JSON-ը կամ excel-ը: Սա ապահովում է հավելվածի անվտանգությունը և հեշտությամբ մուտք գործեք դրանք ծրագրի ցանկացած ֆայլում: JSON ֆայլ մուտք գործելու համար մենք օգտագործում ենք հարմարանքներ օգտագործել այն մեր հատուկ ֆայլում:

Cypress Promise և Cypress Asynchronous. Hands-On Implementation, Օրինակ

Մեր նախորդում հոդված, մենք տեսանք Cypress-ի կազմաձևերը և տարբեր տարբերակներ, որոնք կարող են կազմաձևվել JSON ֆայլերում: Այս հոդվածը կհասկանա Cypress խոստում և Cypress Asynchronous վարքագիծ գործնական իրականացման և օրինակների հետ մեր նախագծում: Մենք նաև կքննարկենք, թե ինչպես կարելի է ընդգրկել սպասումները մեր ասինխրոն կոդում և որոշ կարևոր գործառույթներ, ինչպիսիք են. wrap() և task(). Եկեք սկսենք!

Cypress Promise և Cypress Asynchronous
Cypress խոստում

Cypress Promise և Cypress Asynchronous:

Cypress խոստում և Cypress Asynchronous բնությունը հիմնական հասկացություններից մի քանիսն են: Ինչպես Javascript-ի ցանկացած այլ շրջանակ, Cypress-ը նույնպես պտտվում է Asynchronous-ի և Promises-ի շուրջ: Cypress-ը կառավարում է ամբողջ ասինխրոն վարքագիծը ներսից, և այն թաքնված է օգտագործողից: Մենք կօգտագործենք .then() մեր կոդով խոստումները ձեռքով կարգավորելու համար: Կան արտաքին փաթեթներ, ինչպիսին է Cypress-promise-ը npm-ում, որտեղ մենք կարող ենք շահարկել Cypress-ի ասինխրոն վարքագիծը: Այս թեմաներից յուրաքանչյուրը մանրամասն կքննարկենք:

Բառը

Cypress Asynchronous

Ինչպես գիտենք, Cypress-ը հիմնված է Հանգույց JS. Ցանկացած շրջանակ, որը գրված է Node.js-ից կառուցված asynchronous. Նախքան Cypress-ի ասինխրոն վարքագիծը հասկանալը, մենք պետք է իմանանք տարբերությունը սինխրոն և ասինխրոն բնույթի միջև:

Սինխրոն բնույթ

Սինքրոն ծրագրում կոդի կատարման ժամանակ միայն առաջին տողը հաջողությամբ կատարվելու դեպքում երկրորդ տողը կկատարվի: Այն սպասում է մինչև առաջին տողը կատարվի: Այն անցնում է հաջորդականությամբ:

Ասինխրոն բնույթ

Կոդն աշխատում է միաժամանակ, սպասում է, որ յուրաքանչյուր քայլ կատարվի՝ չանհանգստացնելով նախորդ հրամանի վիճակը: Թեև մենք հաջորդաբար գրել ենք մեր կոդը, ասինխրոն կոդը գործարկվում է առանց որևէ քայլի ավարտին սպասելու և ամբողջովին անկախ է նախորդ հրամանից/կոդից:

Ի՞նչ է ասինխրոնը Cypress-ում:

Cypress-ի բոլոր հրամաններն իրենց բնույթով ասինխրոն են: Cypress-ն ունի փաթաթան, որը հասկանում է մեր գրած հաջորդական կոդը, դրանք հերթագրում է փաթաթման մեջ և աշխատում է ավելի ուշ, երբ մենք գործարկում ենք կոդը: Այսպիսով, Cypress-ը կատարում է մեր բոլոր աշխատանքները, որոնք կապված են համաժամանակյա բնույթի և խոստումների հետ:

Եկեք դրա համար մի օրինակ հասկանանք.

 it('click on the technology option to navigate to the technology URL', function () {
        cy.visit('https://lambdageeks.com/') // No command is executed

        //click on the technology option
        cy.get('.fl-node-5f05604c3188e > .fl-col-content > .fl-module > .fl-module-content > .fl-photo > .fl-photo-content > a > .fl-photo-img') // Nothing is executed here too
            .click() // Nothing happens yet

        cy.url() // No commands executed here too
            .should('include', '/technology') // No, nothing.
    });
        // Now, all the test functions have completed executing
        // Cypress had queued all the commands, and now they will run in sequence

Դա բավականին պարզ և զվարճալի էր: Մենք հիմա հասկացանք, թե ինչպես են աշխատում Cypress Asynchronous հրամանները: Եկեք ավելի խորանանք, թե որտեղ ենք փորձում խառնել համաժամացման և համաժամացման ծածկագիրը:

Cypress Synchronous և Asynchronous հրամանների խառնուրդ

Ինչպես տեսանք, Cypress հրամանները ասինխրոն են: Ցանկացած համաժամանակյա կոդ ներարկելիս Cypress-ը չի սպասում, որ համաժամացման կոդը գործարկվի. հետևաբար, համաժամացման հրամաններն առաջինը գործարկվում են նույնիսկ առանց սպասելու Cypress-ի նախորդ հրամաններին: Ավելի լավ հասկանալու համար նայենք մի կարճ օրինակի:

 it('click on the technology option to navigate to the technology URL', function () {
        cy.visit('https://lambdageeks.com/') 

        //click on the technology option
        cy.get('.fl-node-5f05604c3188e > .fl-col-content > .fl-module > .fl-module-content > .fl-photo > .fl-photo-content > a > .fl-photo-img')
            .click() 

        cy.url() // No commands executed here too
            .should('include', '/technology') // No, nothing.
        console.log("This is to check the log")  // Log to check the async behaviour
    });
});
log հրամանի համաժամանակյա կատարում

Մատյանն ավելացվում է կոդի վերջում, որը համաժամացման հրաման է։ Երբ մենք կատարում ենք թեստը, դուք կարող եք տեսնել, որ գրանցամատյանը տպվել է նույնիսկ էջը բեռնելուց առաջ: Այս կերպ Cypress-ը չի սպասում համաժամանակյա հրամանին և այն կատարում է նույնիսկ իր հրամանները կատարելուց առաջ։

Եթե ​​մենք ցանկանում ենք, որ դրանք կատարվեն այնպես, ինչպես սպասվում է, ապա մենք պետք է այն փաթաթենք ներսում .then() ֆունկցիան։ Եկեք հասկանանք օրինակով.

it('click on the technology option to navigate to the technology URL', function () {
        cy.visit('https://lambdageeks.com/') 

        //click on the technology option
        cy.get('.fl-node-5f05604c3188e > .fl-col-content > .fl-module > .fl-module-content > .fl-photo > .fl-photo-content > a > .fl-photo-img')
            .click() 

        cy.url() // No commands executed here too
            .should('include', '/technology') // No, nothing.
        .then(() => {
            console.log("This is to check the log")  // Log to check the async behaviour
        });
    });
Async կատարումը .then() հրամանով

Ի՞նչ է Cypress Promise-ը:

Ինչպես տեսանք վերևում, Cypress-ը կատարում է բոլոր հրամանները: Մանրամասն վերաձեւակերպելու համար կարելի է ասել Cypress-ը խոստումներ (հրամաններ) ավելացնում է խոստումների շղթայի մեջ: Cypress-ը շղթայի մեջ ամփոփում է բոլոր հրամանները որպես խոստում:

Խոստումները հասկանալու համար համեմատեք դրանք իրական կյանքի սցենարի հետ: Բացատրությունը սահմանում է Խոստումը նաև ասինքրոն բնույթով: Եթե ​​ինչ-որ մեկը ձեզ խոստանում է, նա նույնպես մերժել or կատարել իրենց արած հայտարարությունը. Նմանապես, ասինխրոն, խոստումները կամ մերժել or կատարել ծածկագիրը, որը մենք փաթաթում ենք խոստման մեջ:

Այնուամենայնիվ, Cypress-ը հոգ է տանում բոլոր խոստումների մասին, և ավելորդ է դրանք շահարկել մեր մաքսային կոդով: Որպես Javascript ծրագրավորողներ, մենք հետաքրքրված ենք օգտագործելու մասին սպասում է մեր հրամաններում։ Cypress API-ները բոլորովին այլ են, քան մենք սովորաբար սովոր ենք: Մենք մանրամասնորեն կանդրադառնանք այս ձեռնարկի հետագա հատվածին:

Կիպարիսի պետությունները խոստանում են

Խոստումները երեք տարբեր վիճակներ ունեն՝ հիմնված Cypress հրամանների վրա: Նրանք են

  • վճռական – Առաջանում է, երբ քայլ/հրամանը հաջողությամբ կատարվում է:
  • Ընթացքում – Նշեք, թե որտեղ է սկսվել մահապատիժը, բայց արդյունքն անորոշ է։
  • մերժում – Առաջանում է, երբ քայլը ձախողվել է:

Որպես Javascript ծրագրավորող, մենք հակված ենք մեր կոդում խոստումներ գրել և վերադարձնել դրանք: Օրինակ,

//This code is only for demonstration
describe('Cypress Example ', function () {
    it('click on the technology option to navigate to the technology URL', function () {
        cy.visit('https://lambdageeks.com/')

        //click on the technology option
        cy.get('.fl-node-5f05604c3188e > .fl-col-content > .fl-module > .fl-module-content > .fl-photo > .fl-photo-content > a > .fl-photo-img')
            .then(() => {
                return cy.click();
            })

        cy.url() 
            .then(() => {
                return cy.should('include', '/technology') 
            })
    });
});

Այստեղ մենք խոստումներ ենք վերադարձնում հրամաններից յուրաքանչյուրին: Սա պարտադիր չէ Cypress-ում: Բարեբախտաբար, Cypress-ը ներքուստ հոգում է բոլոր խոստումները, և մենք կարիք չունենք յուրաքանչյուր քայլում խոստումներ ավելացնել: Cypress-ն ունի կրկին փորձելու ունակություն տարբերակ, որտեղ այն կրկնում է հրամանի կատարման համար որոշակի ժամանակ: Մենք կտեսնենք կոդի օրինակ՝ առանց ձեռքով խոստումներ ներառելու:

    it('click on the technology option to navigate to the technology URL', function () {
        cy.visit('https://lambdageeks.com/')

        //click on the technology option
        cy.get('.fl-node-5f05604c3188e > .fl-col-content > .fl-module > .fl-module-content > .fl-photo > .fl-photo-content > a > .fl-photo-img')
            .click()

        cy.url()
            .should('include', '/technology')
    });
});
Cypress-ի հրամանները ներքին կարգով մշակված խոստումներով

Վերոնշյալ կոդը անշնորհք չէ և հեշտ է կարդալ և հասկանալ: Cypress-ը կատարում է բոլոր խոստումները, և այն թաքնված է օգտագործողից: Այսպիսով, մենք չպետք է անհանգստանանք որևէ տեղ խոստումները կարգավորելու կամ վերադարձնելու մասին:

Ինչպե՞ս եք օգտագործում սպասել Cypress-ում:

Ինչպես քննարկվեց վերևում, Cypress-ն ունի ասինխրոն կոդերի մշակման իր ձևը՝ ստեղծելով հրամանների հերթ և գործարկել դրանք հաջորդականությամբ: Ավելացնելով awaits հրամանները չեն աշխատի այնպես, ինչպես սպասվում էր: Քանի որ Cypress-ը ամեն ինչ տնօրինում է ներքին կարգով, խորհուրդ կտամ չավելացնել awaits կոդը։

Եթե ​​Ձեզ անհրաժեշտ է սպասել, կարող եք օգտագործել երրորդ կողմի գրադարանը, ինչպիսին է Cypress-խոստում դա փոխում է, թե ինչպես է աշխատում Cypress-ը: Այս գրադարանը թույլ կտա ձեզ օգտագործել Խոստումները հրամաններում և օգտագործեք սպասել ծածկագրում

Եկեք հասկանանք սպասման եղանակները և ինչպես չօգտագործել դրանք:

Դուք չպետք է օգտագործեք այսպիսի սպասք

//Do not use await this way
describe('Visit the page', () => {
  (async () => {
     cy.visit('https://lambdageeks.com/')
     await cy.url().should('include', '/technology');
  })()
})

Փոխարենը, դուք կարող եք օգտագործել այսպես

describe('Visit the page', () => {
  cy.visit('https://lambdageeks.com/').then(async () => await cy.url().should('include', '/technology') ())
})

Սա կաշխատի Cypress-ի ցանկացած հրամանի համար:

Cypress Wrap

wrap() Cypress-ում ֆունկցիա է, որը տալիս է ցանկացած օբյեկտ, որը փոխանցվում է որպես արգումենտ:

շարահյուսություն

cy.wrap(subject)
cy.wrap(subject, options)

Եկեք դիտարկենք մի օրինակ, թե ինչպես մուտք գործել wrap() մեր օրենսգրքում։

const getName = () => {
  return 'Horse'
}

cy.wrap({ name: getName }).invoke('name').should('eq', 'Horse') // true

Օրինակում մենք փաթաթում ենք getName և ապա կանչիր դրա անունը:

Cypress Wrap Promise

Մենք կարող ենք փաթեթավորել այն խոստումները, որոնք վերադարձվում են ծածկագրով։ Հրամանները կսպասեն խոստման լուծմանը՝ նախքան ստացված արժեքին մուտք գործելը և. ապա շարունակեք հաջորդ հրամանը կամ պնդումը:

const customPromise = new Promise((resolve, reject) => {
  // we use setTimeout() function to access async code.
  setTimeout(() => {
    resolve({
      type: 'success',
      message: 'Apples and Oranges',
    })
  }, 2500)
})

it('should wait for promises to resolve', () => {
  cy.wrap(customPromise).its('message').should('eq', 'Apples and Oranges')
});

Երբ վեճը մտավ cy.wrap() խոստում է, այն կսպասի խոստման լուծմանը։ Եթե ​​խոստումը մերժվի, ապա թեստը կտապալվի։

Cypress-խոստանում npm

Եթե ​​մենք ցանկանում ենք շահարկել Cypress-ի խոստումները, ապա մենք կարող ենք լրացուցիչ օգտագործել գրադարան կամ փաթեթ, որը կոչվում է Cypress-խոստում և ներառեք այն մեր կոդում: Այս փաթեթը թույլ կտա փոխարկել ա Cypress հրաման խոստման մեջ և թույլ է տալիս սպասել կամ համաժամացնել կոդի մեջ: Սակայն այս պայմանները չեն աշխատի before or beforeEach բլոկները. Սկզբում մենք պետք է փաթեթը տեղադրենք մեր նախագծում՝ տերմինալում անցնելով հետևյալ հրամանը.

npm i cypress-promise

Տեղադրվելուց հետո տերմինալը նման տեսք կունենա.

Cypress-promise տեղադրում

Տեղադրվելուց հետո մենք պետք է գրադարանը ներմուծենք մեր թեստային ֆայլ:

import promisify from 'cypress-promise'

Այս գրադարանի միջոցով դուք կարող եք ստեղծել և անտեսել հայրենի Cypress խոստումը և օգտագործել սպասման և համաժամացման կոդում: Դուք պետք է մուտք գործեք խոստում promisify հիմնաբառ. Նույնի համար նայենք օրինակին:

import promisify from 'cypress-promise'

it('should run tests with async/await', async () => {
    const apple = await promisify(cy.wrap('apple'))
    const oranges = await promisify(cy.wrap('oranges'))

    expect(apple).to.equal('apple')
    expect(oranges).to.equal('oranges')
});
Խոստանալ Cypress-խոստում

Սա շատ պարզ և զվարճալի էր սովորելու համար: Այսպիսով, դուք կարող եք նշանակել ասինխրոն կոդ Cypress-ում:

Cypress Async առաջադրանք

task() Cypress-ում ֆունկցիա է, որը գործարկում է կոդը Node-ում: Այս հրամանը թույլ է տալիս դիտարկիչից անցնել հանգույց և կատարել հրամաններ հանգույցում, նախքան արդյունքը կոդ վերադարձնելը:

շարահյուսություն

cy.task(event)
cy.task(event, arg)
cy.task(event, arg, options)

task() վերադարձնում է կամ արժեք կամ խոստում: task() չի հաջողվի, եթե խոստումը վերադարձվի որպես undefined. Այս կերպ այն օգնում է օգտագործողին ֆիքսել տառասխալները, որտեղ իրադարձությունը չի մշակվում որոշ սցենարներում: Եթե ​​դուք չեք պահանջում վերադարձնել որևէ արժեք, ապա անցեք null արժեքը:

Հաճախակի տրվող հարցեր

Cypress-ը սինխրոն է, թե ասինխրոն:

Cypress է Asynchronous վերադարձնելով հերթագրված հրամանները՝ հրամանների կատարման ավարտին սպասելու փոխարեն: Թեև այն ասինխրոն է, այն այնուամենայնիվ կատարում է բոլոր թեստային քայլերը հաջորդաբար: Cypress Engine-ը լուծում է այս բոլոր վարքագիծը:

Հնարավո՞ր է կիպրոսում բռնել խոստման շղթան:

Cypress-ը նախագծված է այնպես, որ մենք չկարողանանք բռնել խոստումները։ Այս հրամանները հենց այնպես Խոստումներ չեն, բայց կարծես խոստում են: Այս կերպ մենք չենք կարող ավելացնել նման բացահայտ մշակողներ catch.

Ինչ է Cypress Json-ը. Օրինակ, սխեման, մանրամասն ձեռքերի վերլուծություն

Մենք կքննարկենք JSON կառուցվածքը, օրինակները և մեր կոդում JSON գրելու մանրամասն գործնական փորձը: Բայց, նախ, եկեք սուզվենք մեր հոդվածում:

նոճի json

Ինչ է Cypress Json-ը. Օրինակ, սխեման, մանրամասն ձեռքի վերլուծություն

Մեր նախորդում հոդված, մենք քննարկեցինք փոփոխականներն ու կեղծանունները և ինչպես գրել մեր առաջին փորձնական դեպքը: Այժմ մենք կքննարկենք Cypress JSON-ը և ինչպես այն ներառել մեր կոդի մեջ:

Բառը

Cypress JSON ֆայլ

Ինչպես տեսանք ավելի վաղ, առաջին անգամ, երբ մենք բացում ենք մեր Cypress Test Runner-ը, այն ստեղծում է a cypress.json ֆայլ։ Այս ֆայլը օգտագործվում է մեզ անհրաժեշտ կազմաձևման ցանկացած արժեք փոխանցելու համար: Այսպիսով, նախ, մենք կդիտարկենք այն տարբերակները, որոնք մենք կարող ենք անցնել մեր մեջ cypress.json ֆայլը.

Կանխադրված JSON ընտրանքներ

Որոշ ընտրանքներ դրված են լռելյայնորեն Cypress-ում: Այնուամենայնիվ, մենք կարող ենք դրանք հարմարեցնել մեր նախագծին համապատասխան: Cypress-ի կողմից սահմանված լռելյայն արժեքները բացահայտելու համար անցեք դեպի Կարգավորումներ թղթապանակ մեր Cypress Test Runner-ում: Այնտեղից ընդլայնեք Կազմաձևման տարբերակը՝ Cypress-ի կողմից սահմանված լռելյայն ընտրանքները դիտելու համար:

Cypress JSON ֆայլ

Ընտրանքները Cypress-ի կողմից տրամադրված լռելյայն կազմաձևերն են:

{
animationDistanceThreshold:5
baseUrl:null
blockHosts:null
browsers:Chrome, Firefox, Electron
chromeWebSecurity:true
component:{}
componentFolder:"cypress/component"
defaultCommandTimeout:4000
downloadsFolder:"cypress/downloads"
e2e:{}
env:null
execTimeout:60000
experimentalFetchPolyfill:false
experimentalInteractiveRunEvents:false
experimentalSourceRewriting:false
experimentalStudio:false
fileServerFolder:""
firefoxGcInterval:runMode, openMode
fixturesFolder:"cypress/fixtures"
hosts:null
ignoreTestFiles:".hot-update.js" includeShadowDom:false integrationFolder:"cypress/integration" modifyObstructiveCode:true nodeVersion:"default" numTestsKeptInMemory:50 pageLoadTimeout:60000 pluginsFile:"cypress/plugins" port:null projectId:"hpcsem" redirectionLimit:20 reporter:"spec" reporterOptions:null requestTimeout:5000 responseTimeout:30000 retries:runMode, openMode screenshotOnRunFailure:true screenshotsFolder:"cypress/screenshots" scrollBehavior:"top" supportFile:"cypress/support" taskTimeout:60000 testFiles:"/.*"
trashAssetsBeforeRuns:true
userAgent:null
video:true
videoCompression:32
videosFolder:"cypress/videos"
videoUploadOnPasses:true
viewportHeight:660
viewportWidth:1000
waitForAnimations:true
watchForFileChanges:true
}

Ընտրանքներ

Մենք կարող ենք փոխել Cypress-ի լռելյայն տարբերակները՝ փոխանցելով մեր նախագծի հետ համատեղելի ցանկացած արգումենտ: Ինչպես անունն է հուշում, cypress.json-ը JSON ֆայլ է, ուստի մենք պետք է մեր փաստարկները փոխանցենք JSON ձևաչափով: Մեր VS կոդում դուք կարող եք տեսնել, որ cypress.json-ը դատարկ է, առանց դրան փոխանցված արգումենտների: Այժմ եկեք տեսնենք տարբեր տարբերակներ, որոնք մենք կարող ենք փոխանցել մեր JSON ֆայլում:

Գլոբալ ընտրանքներ

Մենք կարող ենք գլոբալ տարբերակները փոխանցել այն փաստարկներին, որոնց անհրաժեշտ է գլոբալ հասանելիություն: Օրինակ՝ ստորև բերված աղյուսակում Ընտրանքներ սյունակը ներկայացնում է բանալի բառը, որը մենք կփոխանցենք մեր JSON ֆայլում. Default-ը ցույց է տալիս Cypress-ի կողմից սահմանված որոշակի օպցիոնի լռելյայն արժեքը, իսկ Description-ը ցույց է տալիս տարբերակի իմաստը:

ՏարբերակDefaultՆկարագրություն
baseUrlnullՄենք կարող ենք URL-ը գլոբալ սահմանել՝ յուրաքանչյուր ֆայլում փոխանցելու փոխարեն: Այն կարող է օգտագործվել cy.visit() or cy.request() հրամաններ
clientCertificates[]Դուք կարող եք օգտագործել այս տարբերակը՝ URL-ի հիման վրա հաճախորդի վկայականները կարգավորելու համար
env{}Դուք կարող եք ցանկացած միջավայրի փոփոխական փոխանցել որպես արժեք: Այս տարբերակը օգտակար կլինի, եթե մենք փորձարկում ենք մեր հավելվածը տարբեր միջավայրերում, ինչպիսիք են բեմադրությունը կամ արտադրությունը:
watchForFileChangestrueԱյս ընտրանքը ստուգում է, թե արդյոք Cypress-ի ժամացույցները և վերագործարկվում են ֆայլերի ցանկացած փոփոխության թեստեր:
portnullՄենք կարող ենք փոխանցել նավահանգստի համարը հոսթինգ Cypress-ի վրա: Պատահական նավահանգիստ է ստեղծվում, բայց մենք կարող ենք ավելացնել մեզ անհրաժեշտ պորտի համարը:
numTestsKeptInMemory50Այս ընտրանքը հիշողության մեջ պահվող թեստային պատկերների և հրամանների տվյալների քանակն է: Եթե ​​փորձարկման ընթացքում բրաուզերում հիշողության մեծ սպառում կա, մենք կարող ենք կրճատել դրանց քանակը:
retries{ "runMode": 0, "openMode": 0 }Այս տարբերակը պետք է նշի, թե քանի անգամ պետք է կրկնել անհաջող թեստը: Մենք կարող ենք այն կարգավորել առանձին նոճի վազք և նոճի բաց.
redirectionLimit20Մենք կարող ենք սահմանաչափը կարգավորել այն դեպքերի համար, երբ հավելվածը կարող է վերահղվել մինչև սխալ առաջանալը:
includeShadowDomfalseShadow DOM-ի ներսում նավարկելու հնարավորություն՝ տարրերի հետ փոխազդելու համար: Լռելյայն, այն սահմանված է false: Եթե ​​մեր հավելվածն ունի որևէ տարր, որը պահանջում է ստվերային արմատային նավարկություն, կարող եք սահմանել այն true.

Cypress JSON Timeout

Timeout-ը ցանկացած ավտոմատացման շրջանակում ամենակարևոր հասկացություններից մեկն է: Cypress-ը տրամադրում է մի շարք տարբերակներ, որոնք օգնում են կարգավորել մեր սկրիպտների ժամանակի վերջնաժամկետը: Նախ, մենք կդիտարկենք այն տարբերակները, որոնք մենք կարող ենք կարգավորել:

ՏարբերակDefaultՆկարագրություն
defaultCommandTimeout4000Այս տարբերակը պետք է սպասել DOM Elements-ի վրա հիմնված հրամանների բեռնմանը: Սա միլիվայրկյաններով է:
requestTimeout5000Ժամանակը, միլիվայրկյաններով, սպասելու մինչև cy.wait() հրամանի խնդրանքը ժամանակի վերջանալու համար:
responseTimeout30000Այս ժամկետը պետք է սպասել մինչև պատասխան մի շարք հրամանների, ինչպիսիք են  cy.request()cy.wait()cy.fixture()cy.getCookie()
cy.getCookies()cy.setCookie()cy.clearCookie()cy.clearCookies(), եւ cy.screenshot() հրամաններ
taskTimeout60000Կատարման ավարտը միլիվայրկյաններով ընդհատվում է cy.task() հրաման
execTimeout60000Այս անգամ միլիվայրկյաններով պետք է սպասել ավարտին հասցնելու կատարումը cy.exec() հրաման,
որը համակարգի հրամանի ավարտն է
pageLoadTimeout60000Այս թայմաութը սպասում է page navigation events կամ հրամաններ, որոնք փոխազդում են
նման էջերով cy.visit()cy.go()cy.reload()

Cypress Կարդացեք JSON ֆայլը

Երբեմն մեզանից կպահանջվի փոխազդել մեր նախագծի թղթապանակների կամ ֆայլերի հետ: Փոխազդելու համար մենք պետք է որոշակի տարբերակներ սահմանենք մեր մեջ cypress.json ֆայլ ֆայլերը շահարկելու համար: Այսպիսով, նախ, եկեք դիտարկենք մեր թղթապանակների/ֆայլերի կազմաձևման մեջ առկա տարբերակները:

ՏարբերակDefaultՆկարագրություն
downloadsFoldercypress/downloadsՍա այն ուղին է, որտեղ ֆայլերը ներբեռնվում և պահվում են փորձարկման ընթացքում
fixturesFoldercypress/fixturesՍա այն թղթապանակի ուղին է, որը պարունակում է հարմարանքների ֆայլերը: Մենք կարող ենք անցնել false ֆայլերի պահպանումն անջատելու համար:
ignoreTestFiles*.hot-update.jsYou can pass this as a string or array of global patterns to ignore test files for the test run. However, it would be displayed in the test files.
integrationFoldercypress/integrationԻնտեգրման թեստային ֆայլերը պահվում են թղթապանակի այս ճանապարհում:
pluginsFilecypress/plugins/index.jsԱյս ուղին այն վայրն է, որտեղ պահվում են հավելումները: Այս կոնֆիգուրացիան անջատելու համար կարող եք փաստարկը փոխանցել որպես false:
screenshotsFoldercypress/screenshotsScreenshots from the execution of cy.screenshot() command and test failure during cypress run are stored in this foldersupportFilecypress/support/index.jsHere the test files that load before the test are stored. You have the option to disable by passing false
testFiles**/*.*Ճանապարհ դեպի փորձնական ֆայլեր, որոնք պետք է բեռնվեն: Դա կա՛մ գլոբալ օրինաչափությունների տող է, կա՛մ զանգված:
videosFoldercypress/videosԹղթապանակի ուղին, որը կպահի տեսանյութերը թեստի կատարման ընթացքում

Սքրինշոթներ և վիդեո ընտրանքներ

Մենք կարող ենք կարգավորել մեր նկարները և տեսանյութերը մեր cypress.json() ֆայլում, և Cypress-ը մեզ տրամադրում է մեր կազմաձևումը հարմարեցնելու որոշ տարբերակներ:

ՏարբերակDefaultՆկարագրություն
screenshotOnRunFailuretrueՃիշտ կամ կեղծի սահմանելու տարբերակ՝ արդյոք Cypress-ը սքրինշոթ է վերցնում թեստի ձախողման ժամանակ, երբ cypress-ը աշխատում է: Այն սահմանված է true ըստ նախնականի
trashAssetsBeforeRunstrueԱյս տարբերակը ակտիվները աղբարկղում է videosFolder, downloadsFolder և screenshotsFolder ամենից առաջ cypress run
videoCompression32Այս տարբերակը վիդեո սեղմման որակն է, որը չափվում է Constant Rate Factor (CRF): Անցնելով false, կարող եք նաև անջատել այս տարբերակը։ Դուք կարող եք արժեքներ փոխանցել 0-ից մինչև 51, որտեղ ամենացածր արժեքը ավելի լավ որակ է տալիս:
videosFoldercypress/videosԹղթապանակ, որտեղ պահվում է թեստերի տեսանյութը։
videotrueԲուլյան արժեք՝ փորձարկման կատարման տեսանյութը նկարելու համար cypress run.
videoUploadOnPassestrueԱյս տարբերակն այն է, որ տեսահոլովակները վերբեռնվեն վահանակում, երբ հատուկ ֆայլի բոլոր փորձնական դեպքերն անցնում են:

Viewport և Actionability

Դուք կարող եք կարգավորել և փոխանցել արժեքները՝ փոխելու տեսադաշտի բարձրությունը և լայնությունը Cypress-ի կողմից տրամադրված տարբերակներով: Գործողությունների ընտրանքները կարող են նաև կազմաձևվել:

ՏարբերակDefaultՆկարագրություն
viewportHeight660Սա նախատեսված է հավելվածի լռելյայն բարձրությունը պիքսելներով ապահովելու համար: Մենք կարող ենք անտեսել այս հրամանը cy.viewport()
viewportWidth1000Հավելվածի համար տեսադաշտի լայնությունը պիքսելներով տարբերակ: Կարող է վերացվել հետ cy.viewport() հրաման.
animationDistanceThreshold5Պիքսելներով չափված հեռավորության շեմային արժեքը, որտեղ տարրը պետք է գերազանցի` հաշվի առնելով շարժման ժամանակը:
waitForAnimationstrueՏարբերակ՝ սպասելու, որ տարրերն ավարտեն անիմացիան՝ որևէ հրաման կատարելուց առաջ:
scrollBehaviortopՍա տեսադաշտի տարբերակ է, որը պետք է ոլորվի դեպի տարր անմիջապես որևէ հրաման կատարելուց առաջ: Հասանելի տարբերակներն են 'center''top''bottom''nearest'Կամ false, Որտեղ false անջատում է ոլորումը:

Cypress JSON Օրինակ

Ավելի վաղ մենք տեսանք տարբեր կոնֆիգուրացիաներ, որոնք կարող ենք անցնել մեր մեջ cypress.json ֆայլ։ Այժմ մենք կդիտարկենք օրինակ, թե ինչպես դրանք օգտագործել մեր նախագծում:

cypress.json ֆայլում լռելյայն արժեքների վերացում

Մեր VS կոդում բացեք cypress.json ֆայլ։ Մենք կվերադառնանք defaultCommandTimeout հրամանը 8000.

{
    "defaultCommandTimeout" : 8000
}

Ահա թե ինչպես է այն նայում մեր VS կոդը նախագծում:

cypress.json ֆայլ

Փոխելով cypress.json ֆայլ, այն վերաբերում է ամբողջ շրջանակին: Մենք կարող ենք հաստատել՝ նավարկելով մեր Cypress-ի կարգավորումները: Այն փոխվել է լռելյայն արժեքից 4000 դեպի 8000

Cypress-ի կարգավորումների լռելյայն արժեքները

Թեստային սցենարի միջոցով լռելյայն արժեքների վերացում

Մենք կարող ենք շահարկել լռելյայն արժեքները նաև մեր թեստային սցենարի միջոցով: ներս անցնելու փոխարեն cypress.json ֆայլ, մենք այն կփոխանցենք մեր թեստային ֆայլում:


//Changing the timeout from 4 seconds to 8 seconds
Cypress.config('defaultCommandTimeout',8000)

// Test code
cy.get('#username').type(users.email)
cy.get('#pswd').type(users.password)
cy.get('#login_btn').click()

Այս կերպ մենք կարող ենք անտեսել լռելյայն արժեքները մեր թեստային ֆայլում: Այնուամենայնիվ, սա չի ազդում շրջանակի մակարդակի վրա կազմաձևման որևէ փոփոխության վրա: Cypress-ը նախապատվությունը տալիս է արժեքներին cypress.json. Ի վերջո, այն վերցնում է գլոբալ կոնֆիգուրացիաները:

Cypress Fixture JSON զանգված

Նոճի cy.fixture() գործառույթ է, որը ֆայլում բեռնում է տվյալների ֆիքսված հավաքածու: Մենք կարող ենք օգտագործել սարքը որպես JSON՝ JSON ֆայլում ցանկացած արժեք կամ զանգված բեռնելու համար: Նախ, եկեք հասկանանք, թե ինչպես մուտք գործել JSON ֆայլ մեր նախագծի մեջ:

Իմ JSON ֆայլն ունի երկու հատկություն՝ օգտանուն և գաղտնաբառ: Իմ JSON ֆայլի անունն է examples.json.

{
"email": "test@gmail.com",
"password" : test123
}

Մեր հատուկ ֆայլում մենք մուտք կունենանք մեր սարքը cy.fixture() հրամանով և հայեցակարգով կաղապարներ.

 cy.fixture('example.json').as('example')

 //Using the alias name to this keyword, So we can use globally  
        const userObj = this.userData
//looping our .json data with a new variable users
         cy.get(userData).each((users) => 
         {
              //Write the test code.
        cy.get('#username').type(users.email)
        cy.get('#pswd').type(users.password)
          }       

Cypress env JSON

Շրջակա միջավայրի փոփոխականները օգտագործվում են կազմակերպությունների բազմաթիվ նախագծերում: Մենք օգտագործում ենք շրջակա միջավայրի փոփոխականներ

  • երբ արժեքները դինամիկ են տարբեր մեքենաներում
  • երբ մենք ցանկանում ենք փորձարկել տարբեր միջավայրերում, ինչպիսիք են բեմադրությունը, փորձարկումը, մշակումը, արտադրությունը/կենդանի

Այս դեպքերը մեզանից պահանջում են սահմանել շրջակա միջավայրի փոփոխականներ: Այնուամենայնիվ, եթե մենք սահմանում ենք env փոփոխական մեկ հատուկ ֆայլում, այն չի արտացոլվում այլ հատուկ ֆայլերում: Դա պայմանավորված է նրանով, որ Cypress-ը գործարկում է յուրաքանչյուր հատուկ ֆայլ ինքնուրույն: Այս կերպ մեզ անհրաժեշտ կլինի առանձին կարգավորել env փոփոխականները:

Մենք մուտք ենք գործում մեր միջավայրի ֆայլերը մեր Cypress JSON ֆայլից, այսինքն. cypress.json ֆայլ։ Այսպիսով, մեզանից կպահանջվի վերագրել տարբերակը մեր մեջ cypress.json ֆայլ և օգտագործեցինք այն մեր հատուկ ֆայլում: Այսպիսով, եկեք խորանանք մեր օրինակի մեջ:

Մենք կարող ենք սահմանել մեր միջավայրի փոփոխականները մեր կազմաձևման ֆայլում կամ cypress.env.json ֆայլը.

Սահմանել շրջակա միջավայրի փոփոխականը cypress.json ֆայլում

Մենք սահմանել ենք env հատկությունը բանալի-արժեք զույգով: Բանալի բառի տակ փոխանցված ցանկացած արժեք env ընկնել շրջակա միջավայրի փոփոխականների տակ, և Cypress-ը վերցնում է փաստարկը env հիմնաբառ. Շարահյուսությունը նման է ստորև.

{
  "env": {
    "key1": "value1",
    "key2": "value2"
  }
}

Եթե ​​մենք ցանկանում ենք մուտք գործել env փոփոխական մեր հատուկ ֆայլում, մենք դրանք վերագրում ենք, ինչպես նշված է ստորև:

Cypress.env() //returns both the key1,value1 and key2, value2

Cypress.env(key1) //returns only the value1

Մենք կավելացնենք env կոնֆիգուրացիան մեր նախագծում և հասանելի կլինի դրանք մեր հատուկ ֆայլում: Մեր մեջ cypress.json ֆայլ, ավելացրեք հետևյալ կոնֆիգուրացիան. Մենք սահմանում ենք մեր URL սեփականություն և դրանք վերագրելով մեր URL-ին: Այստեղ, URL բանալին է, և https://lambdageeks.com/technology/ արժեքն է։

{
  "env" : {
      "url" : "https://lambdageeks.com/technology/"
    }
}

Քանի որ մենք հայտարարել ենք կոնֆիգուրացիան, մենք դրանք մուտք կունենանք մեր հատուկ ֆայլում: Այն կարծես ստորև բերված է: Ինչպես նշվեց վերևում, մենք կօգտագործենք Cypress.env() env փոփոխականին մուտք գործելու մեթոդ:

// type definitions for Cypress object "cy"
// <reference types="cypress" />

describe('Cypress Example ', function () {

    it('accessing the environment variable', function () {

        //Calling URL from cypress.json
        cy.visit(Cypress.env('url'));

    })
})

Սահմանել շրջակա միջավայրի փոփոխականը cypress.env.json ֆայլում

Մենք կարող ենք նշանակել մեր միջավայրի փոփոխականը մեր cypress env JSON ֆայլում: Դրա համար մենք պետք է ստեղծենք նոր ֆայլ, որը կոչվում է cypress.env.json նախագծի հիմքում: Մենք չենք պահանջի env հիմնաբառ; փոխարենը, մենք կարող ենք ուղղակիորեն մուտք գործել դրանք՝ փոխանցելով բանալի-արժեք զույգը:

{
    "key1": "value1",
    "key2": "value2"
}

Եկեք նայենք, թե ինչպես դրանք վերագրել մեր մեջ cypress.env.json ֆայլը.

{
    "url" : "https://lambdageeks.com/",
    "urlTechnology" : "https://lambdageeks.com/technology/"
}
Cypress.env.json ֆայլի ստեղծում

Ինչպես տեսնում եք վերևում, մենք ստեղծել ենք նոր ֆայլ, cypress.env.json, և ավելացրեց մեր URL հատկությունները. Շրջակա միջավայրի փոփոխականներին մուտք գործելու եղանակը կլինի նույնը, ինչ վերը նշված է նախորդ բաժնում:

Cypress JSON Reporter

Ինչպես գիտենք, Cypress-ը կառուցված է Մոխայի գագաթին; ցանկացած լրագրող, որը կառուցված է Mocha-ի համար, կարող է օգտագործվել: Մենք կարող ենք կարգավորել թղթակցին մեր JSON ֆայլում գլոբալ մեր մեջ cypress.json ֆայլը.

reporterspecԱյստեղ դուք կարող եք նշել թղթակցին, որը պետք է ստեղծի նոճի վազքի ընթացքում: Այն սահմանված է spec որպես լռելյայն թղթակից:
reporterOptionsnullՍա թղթակցի համար աջակցվող տարբերակները նշելու համար է:

Վերը նշված տարբերակները լռելյայնորեն ռեպորտաժում սահմանված կազմաձևերն են: Բացի այդ, ի spec թղթակիցը սահմանված է լռելյայն: Այսպիսով, ռեպորտաժում մենք կարող ենք տեղադրել ցանկացած թղթակից, որը համատեղելի է Mocha-ի հետ: reporterOptions այն է` նշել աջակցվող տարբերակները` կախված մեր կազմաձևվող թղթակցից:

Տեսնենք, թե ինչպես կարելի է կարգավորել թղթակիցը մեր մեջ cypress.json ֆայլը.

Եկեք համարենք բազմաթղթակցին, որպես մեր թղթակից: Մենք նախ կտեղադրենք թղթակիցը և դրանք կավելացնենք մեր cypress.json ֆայլը.

npm install --save-dev mocha cypress-multi-reporters mochawesome

Տեղադրեք թղթակիցը՝ հրամանի տողում անցնելով վերը նշված հրամանը: Հիմա, մեր cypress.json ֆայլ, ավելացրեք հետևյալ հատկությունը.

"reporter": "cypress-multi-reporters",
  "reporterOptions": {
      "reportDir": "cypress/reports/multireports",
      "overwrite": false,
      "html": false,
      "json": true
    }

Մենք մանրամասն կհասկանանք հատկություններից յուրաքանչյուրը։

լրագրողԼրագրողի անունը, որը մենք կարգավորում ենք մեր նախագծում

հաղորդումՌեժՏեղեկագիր, որտեղ մենք պատրաստվում ենք դուրս բերել մեր արդյունքները:

վերագրելԱյս դրոշը պահանջում է վերագրանցել նախորդ հաշվետվությունները:

HTMLՍտեղծում է թեստի ավարտի հաշվետվություն:

jsonԱրդյո՞ք փորձարկման ավարտին ստեղծել JSON ֆայլ:

Cypress-ի լրագրողը cypress JSON ֆայլում

Cypress package-lock.json

The package-lock.json ֆայլը ստեղծվում է ավտոմատ կերպով ցանկացած գործողության համար, երբ npm-ը փոփոխում է հանգույցի մոդուլները կամ package.json ֆայլը: Երբ մենք ավելացնում ենք որևէ տարբերակ կամ տեղադրել ցանկացած նոր կախվածություն մեր Cypress-ում փաթեթ JSON ֆայլը, այնուհետև Cypress package-lock.json-ը ինքնաբերաբար թարմացվում է:

Cypess package.lock JSON ֆայլը հետևում է յուրաքանչյուր փաթեթին և դրա տարբերակին, որպեսզի տեղադրումները պահպանվեն և թարմացվեն գլոբալ յուրաքանչյուր npm տեղադրման ժամանակ: Այսպիսով, մեր Cypress փաթեթի JSON ֆայլում, երբ մենք թարմացնում ենք տարբերակը կամ ավելացնում ենք որևէ կախվածություն, package-lock.json-ը նույնպես թարմացվում է, և մենք չենք ցանկանում որևէ փոփոխություն կատարել դրանում:

Cypress package-lock.json ֆայլ

Cypress Օրինակ՝ Open Cypress, Variables, First Test Script

Վերջին հոդվածում մենք տեսանք, թե ինչ է Cypress-ը, դրա ճարտարապետությունը, տեղադրման գործընթացը և տեղադրման համար անհրաժեշտ նախադրյալները: Այնուամենայնիվ, նախքան մեր թեստերը գրելը, մենք պետք է տեղադրենք Cypress-ը: Սեղմել այստեղ Cypress-ի տեղադրման մանրամասն քայլերը ստանալու համար:

Cypress Օրինակ
Cypress Օրինակ

Cypress Օրինակ

Այս հոդվածը կքննարկի Cypress օրինակ, JSON օրինակներ, փոփոխականներ և փոխանուններ և ինչպես գրել թեստային դեպքեր: Այսպիսով, եկեք սկսենք:

Բառը

Cypress JSON Օրինակ

Սկզբում, երբ մենք բացում ենք մեր Cypress Test Runner-ը, ա cypress.json կազմաձևման ֆայլը ստեղծվել է: Մենք հակված ենք պահելու այն հատվածը, որը հնարավորություն է տալիս իրականացնելու և պահելու որոշ հատկություններ, որոնք օգնում են ծրագրում կամ ավտոմատացման կոդի գործարկմանը: Նմանապես, Cypress-ն ունի նաև JSON ֆայլ՝ ցանկացած արժեք պահելու համար, որը մենք տրամադրում ենք որպես կազմաձևման հատկություններ:

Եկեք նայենք որոշներին օրինակներ, որոնք մենք կարող ենք կարգավորել մեր Cypress JSON-ում ֆայլը.

Cypress-ն արդեն ունի որոշ կանխադրված կազմաձևման արժեքներ: Կան մի քանի տարբերակներ, որոնք մենք կարող ենք հարմարեցնել մեր պահանջներին համապատասխան: Օրինակ, մենք կարող ենք ապահովել baseURL ունեցվածքը մեր cypress.json ֆայլ։ Այսպիսով, ամեն անգամ, երբ մենք գործարկում ենք սցենարը, baseURL-ը դրվում է և գործարկվում:

ՏարբերակԿանխադրված արժեքներՆկարագրություն
baseUrlզրոԱյս տարբերակը կարող է օգտագործվել որպես ա URL -ի նախածանցը cy.request() or cy.visit() հրամանները:
watchForFileChangesճիշտԱյս տարբերակը լռելյայն սահմանված է որպես ճշմարիտ: Այն դիտում է ֆայլերը փոփոխությունների համար և վերագործարկում դրանք, երբ փոփոխություններ են կատարվում:

Ստորև բերված է այն լուսանկարը, որում մենք փոփոխել ենք baseURL-ը և watchForFileChanges-ի հատկությունները: Cypress.json ֆայլը.

Նշում. Մենք հետագայում կքննարկենք Cypress Configuration-ի բոլոր տարբերակները որպես առանձին թեմա:

Cypress Օրինակ
cypress.json ֆայլ

Բաց Cypress

Ավելի վաղ մենք տեսանք, թե ինչպես ստեղծել Cypress նախագիծ: Այստեղ մենք կտեսնենք, թե ինչպես բացել և գործարկել Cypress Test runner-ը: Այսպիսով, եկեք սուզվենք:

Եթե ​​Cypress-ը տեղադրել եք npm-ի միջոցով, ապա այն տեղադրվել է ./node_modules գրացուցակում: Այսպիսով, մենք կարող ենք բացել մեր Cypress test runner՝ անցնելով npm հրաման - ից արմատ մեր նախագծի գրացուցակում.

Մենք կարող ենք բացել Cypress-ը հետևյալ եղանակներից մեկով

1. տալով ամբողջական ուղու հրամանը

./node_modules/.bin/cypress open

2. օգտագործելով npm bin-ի դյուրանցումը

$(npm bin)/cypress open

3. օգտագործելով npx

Այստեղ npx-ն աջակցվում է միայն npm > v5.2-ով, կամ մենք կարող ենք այն առանձին տեղադրել:

npx cypress open

4. օգտագործելով մանվածք

yarn run cypress open

Այժմ մենք կտեսնենք, թե ինչպես բացել Cypress-ը՝ մեր տերմինալում անցնելով ամբողջական ուղու հրամանը։

1. Պետք է փոխանցեք հրամանը, որը վերը նշված է 1-ին կետում, և տերմինալում կարող եք տեսնել հետևյալը

Cypress-ի բացում տերմինալում

2. Մի պահ հետո մենք կարող ենք տեսնել Cypress Test վազորդի գործարկումը և կկարողանանք դիտել Test runner-ը, ինչպես ցույց է տրված ստորև: Փորձարկման վազորդը գործարկվելուց հետո դուք կարող եք տեսնել որոշ փորձարկման դեպքեր: Cypress-ը ստեղծել է փորձնական թղթապանակ մեր նախագծի արմատում, որն օգնում է մեզ թեստային դեպքերի հիմնական տեղադրման և գրման հարցում:

Օրինակ ֆայլեր Test Runner-ում

Այժմ վերադառնանք VS Code-ին: Նախ, դուք կարող եք դիտել որոշ թղթապանակների կառուցվածքներ, որոնք բնակեցված են: Այժմ եկեք բաժանենք թղթապանակների կառուցվածքներից յուրաքանչյուրը և մանրամասն նայենք դրանց:

Թղթապանակի կառուցվածքը Cypress-ում

Ինչպես տեսնում ենք, Cypress-ը ստեղծել է թղթապանակի կառուցվածք մեր կոդերի խմբագրիչում: Մենք դրանք մանրամասն կքննարկենք:

Թղթապանակներ Cypress-ում Օրինակ
  1. Ռադիո – Սարքավորումների թղթապանակը պարունակում է տվյալներ, որոնք ստատիկ են և վերօգտագործելի են նախագծի ողջ ընթացքում: Լավագույն պրակտիկաներից մեկը մեր թեստերում հարդքոր տվյալները (օրինակ՝ հավատարմագրերը, թեստային հաղորդագրությունները) չեն: Փոխարենը, մենք մուտք ենք գործում դրանք JSON, CSV կամ HTML ֆայլի միջոցով: Մենք պետք է ստեղծենք մեր տվյալների ֆայլերը հարմարանքների թղթապանակի տակ: Մենք մուտք ենք գործում այս ֆայլը մեր թեստի ժամանակ՝ օգտագործելով cy.fixture հրաման.
  2. Ինտեգրում – Այս թղթապանակի տակ մենք գրում ենք իրական փորձարկման դեպքերը, որոնք մենք սովորաբար անվանում ենք հատուկ ֆայլ: Ինտեգրման թղթապանակի ներսում մենք կարող ենք ստեղծել բազմաթիվ թղթապանակներ և բազմաթիվ թեստային ֆայլեր յուրաքանչյուր թղթապանակի տակ՝ հիմնվելով մեր նախագծի պահանջների վրա: Դուք կարող եք նաև տեսնել որոշ կանխադրված ֆայլեր, որոնք արտադրվել են որոշ օրինակներով:
  3. Plugins – Plugins պանակը պարունակում է ֆայլեր, որոնք թույլ են տալիս հպել, մուտք գործել և փոփոխել Cypress-ի ներքին աշխատանքային վարքագիծը: Փլագինների միջոցով դուք կարող եք գրել հատուկ ծածկագիր, որը կարող է օգնել ձեզ կատարել փորձնական հրամաններ, որոնք ուղղակիորեն հասանելի են ձեր կոդի կառուցվածքի յուրաքանչյուր մասի (կատարումից առաջ կամ հետո): Լռելյայնորեն, Cypress-ը ստեղծում է հավելումներ այս ճանապարհով cypress/plugin/index.js
  4. աջակցություն -Աջակցման թղթապանակի տակ մենք ունենք ֆայլեր, որոնք օգնում են մեզ տրամադրել ստանդարտ կամ բազմակի օգտագործման մեթոդներ: Նախքան յուրաքանչյուր սպեկտրի գործարկումը, Cypress-ը գործարկում է «Աջակցություն» պանակը: Այսպիսով, անհրաժեշտ չէ ներմուծել աջակցության ֆայլը յուրաքանչյուր այլ հատուկ ֆայլում: Այս թղթապանակը ճիշտ վայրն է՝ ավելացնելու բազմակի օգտագործման մեթոդներ կամ գլոբալ գործառույթներ, որոնք անհրաժեշտ են օգտագործել բոլոր մյուս հատուկ ֆայլերի վրա:
  5. Հանգույցի մոդուլներ – Այս թղթապանակը պարունակում է բոլոր npm փաթեթները, որոնք մենք տեղադրել ենք: Հանգույցային մոդուլները կարևոր են ցանկացած հանգույցի նախագիծ գործարկելու համար: Բոլոր գործառույթները, որոնք կան մեր Cypress նախագծում, գրված են մեր հանգույցի մոդուլների թղթապանակում: Մենք չենք փոփոխի ոչ մի ֆայլ հանգույցի մոդուլների ներսում:
  6. Cypress.json - Մենք կարող ենք ավելացնել բազմաթիվ կոնֆիգուրացիաներ մեր մեջ Cypress.json ֆայլ։ Օրինակ, մենք կարող ենք ավելացնել շրջակա միջավայրի փոփոխականներ, baseURL, ժամանակի ընդհատումներ կամ ցանկացած այլ տարբերակ՝ Cypress-ի կազմաձևման ֆայլում լռելյայն ընտրանքները վերացնելու համար:

Փոփոխականներ և փոխանուններ

Մենք մանրամասն կքննարկենք Cypress-ի փոփոխականներն ու անունները:

Քանի որ մենք հասկանում և սովորում ենք Cypress-ը, մեզ համար կարող է դժվար լինել հասկանալը Ասինխրոն API բնությունը կիպրոսում. Բայց ինչպես տեսնում ենք շատ օրինակներ ապագայում, այն կդառնա տորթի կտոր: Շատ ժամանակակից բրաուզերներ օգտագործում են ասինխրոն API-ներ, և նույնիսկ հիմնական Node մոդուլները գրված են ասինխրոն կոդով: Ավելին, Asynchronous կոդը առկա է Javascript-ի կոդում ամենուր: Հետևաբար, մենք կուսումնասիրենք վերադարձի արժեքները Cypress-ում:

Վերադարձեք արժեքները Cypress-ում

Cypress-ի բոլոր հրամաններն են հերթագրված և վազում ասինքրոն կերպով. Հետեւաբար, մենք չի կարող վերագրել կամ փոխազդել որևէ վերադարձի արժեքների հետ Cypress-ի ցանկացած հրամանից: Մենք կտեսնենք դրա մի փոքրիկ օրինակ:

const button = cy.get("login-btn");  //this command is to get the element with the button attribute

button.click()

Փակուղիները

Մենք չենք կարող մուտք գործել կոճակի ատրիբուտները վերը նշված հրամանի միջոցով: Փոխարենը, մենք կարող ենք տալ Cypress հրամաններ՝ օգտագործելով .then(): Մենք սրանք անվանում ենք փակումը.

.հետո ()

.then()-ն օգնում է ձեզ մուտք գործել այն շարանը, որը ստացվում է նախորդ հրամանից: Եթե ​​հասկացել եք հայրենի խոստումներ, դա նույն կերպ է .then() աշխատում է Cypress-ի հետ։ Մենք կարող ենք նաև տեղադրել տարբեր հրամաններ .then(): Յուրաքանչյուր ներդիր հրաման կարող է մուտք գործել հանգույցի նախորդ հրամանը: Մենք դա կտեսնենք օրինակով։

cy.get('login').then(($btn) => {

  // store the button's text
  const buttonText = $btn.text()

  // we are comparing the two buttons' text
  // and ensuring they are different
  cy.get('login').should(($btn2) => {
    expect($btn2.text()).not.to.eq(buttonText)
  })
})

Մենք օգտագործել ենք Փակուղիները վերը նշված օրինակում՝ հնարավորություն տալով մեզ պահել նախորդ հրամանի հղումը օղակում:

Փոփոխականների

Սովորաբար, մենք հակված ենք փոփոխականին արժեք վերագրել: Բայց Cypress-ում մենք գրեթե չենք օգտագործում const, var, եւ let. Երբ մենք օգտագործում ենք փակումներ, մենք կարող ենք մուտք գործել ստացված օբյեկտներ՝ առանց դրանք փոփոխականին վերագրելու:

Բայց կան դեպքեր, երբ մենք կարող ենք փոփոխական հայտարարել, երբ օբյեկտի վիճակը փոխվում է (փոփոխվող օբյեկտներ): Օրինակ, եթե մենք պահանջում ենք համեմատել օբյեկտն իր նախկին արժեքի հետ, մենք դրանք կհայտարարենք փոփոխականի՝ այն հաջորդ արժեքի հետ համեմատելու համար: Դիտարկենք դրա համար օրինակ:

<button>increment</button>

You clicked button <span id="num">0</span> times

Այստեղ 0-ով հաշվվող տիրույթը շարունակում է աճել ամեն անգամ, երբ սեղմում ենք կոճակը: Այսպիսով, կոճակի օբյեկտը հակված է ամեն անգամ փոխել իր վիճակը:

Հիմա եկեք տեսնենք, թե ինչպես կարող ենք դա վերագրել մեր Cypress կոդի փոփոխականին:

cy.get('#num').then(($span) => {
  // we are capturing the number by assigning it to a variable
  const num1 = parseFloat($span.text())

  cy.get('button')
    .click()  //we have clicked the button once
    .then(() => {
      // we are capturing the number again by assigning it to another variable
      const num2 = parseFloat($span.text())

      // we are ensuring that num1+1 is equal to num2
      expect(num2).to.eq(num1 + 1)
    })
})

Քանի որ span-ը փոխում է իր վիճակը ամեն անգամ, երբ մենք սեղմում ենք կոճակը, մենք կարող ենք այն վերագրել փոփոխականին՝ համեմատելու ներկա և նախորդ վիճակը: Միայն փոփոխական օբյեկտների դեպքում մենք կպահանջենք փոփոխականներ և օգտագործելով const լավ մոտեցում է։

Ալիաներ

Նախկինում մենք տեսանք, թե որն է փոփոխականները և դրա սահմանափակումը Cypress-ում: Այս սահմանափակումը հաղթահարելու համար պատկերված է կեղծանունները: Alias-ը Cypress-ի հզոր կառույցներից է: Սա մանրամասն կանդրադառնանք օրինակներով:

Ընդհանրապես, կեղծանունները կարող են օգնել ձեզ աշխատել որպես փոփոխական: Այնուամենայնիվ, կան որոշ օգտագործման դեպքեր, երբ փոխանունը կարող է օգնել մեզ փոփոխականի փոխարեն:

1. Կրկին օգտագործել DOM տարրերը

Մենք կարող ենք DOM տարրերի կեղծանունով և հետագայում մուտք գործել դրանք՝ նորից օգտագործելու համար: Այլանունները նույնպես հաղթահարում են սահմանափակումները .հետո () հրաման.

2. Համատեքստի փոխանակում

Պարզ իմաստով, համատեքստի փոխանակումը օբյեկտի փոխանակումն է կեռիկների և թեստերի միջև: Համատեքստի փոխանակման առաջնային օգտագործման դեպքը վերաբերում է cy.fixture – որը ֆայլի մեջ տվյալների ֆիքսված հավաքածու բեռնելն է:

Ինչպե՞ս մուտք գործել կեղծանուններ:

Այստեղ մենք կտեսնենք, թե ինչպես կարելի է մուտք գործել կեղծանուններ: Մենք կօգտագործենք .as() հրաման՝ տարրը հետագայում օգտագործելու համար: Պահանջվող պարամետրն է կեղծանունը. Փոխանունի անունը օգտագործվում է որպես հղում a-ում cy.get() or cy.wait() օգտագործելով @ նախածանց.

Մենք կդիտարկենք մի օրինակ, թե ինչպես մուտք գործել այլանուններ:

cy.get('#user_login').as('username')
cy.get('@username').type('abc@gmail.com')

Առաջին տողում մենք DOM-ից ստանում ենք user_login-ի ID-ն: Այնուհետև մենք օգտագործում ենք .as() և անուն-ազգանունով հայտարարում: Երկրորդ տողում մենք մուտք ենք գործում մեր կեղծանունը @ խորհրդանիշը և կատարումը տիպ ակցիան.

Cypress Test օրինակ

Մենք կսկսենք գրել մեր առաջին փորձնական դեպքը Cypress-ի հետ: Դա շատ պարզ է և հեշտ։ Բայց մինչ այդ մենք կանդրադառնանք Cypress թեստի կառուցվածքներին:

Հիմնական Cypress Constructs

Cypress-ը ընդունել է Mocha-ի շարահյուսությունը իր թեստային դեպքերի համար և օգտագործում է Mocha-ի տրամադրած բոլոր տարբերակները: Ստորև բերված են Cypress-ի հիմնական կոնստրուկցիաները, որոնք ընդհանուր առմամբ օգտագործվում են մեր փորձարկման դեպքերի համար:

  • Նկարագրել () – միավորում է բոլոր թեստի դեպքերը մեկ ավելի մեծ թեստի մեջ և խմբավորում դրանք միասին: Այն պահանջում է երկու պարամետր՝ թեստի նկարագրություն և հետ կանչելու ֆունկցիա:
  • այն () – մենք գրում ենք անհատական ​​թեստային դեպքեր մեր it() բլոկում: Այս բլոկը նաև ընդունում է երկու պարամետր՝ ինչ է անում թեստը, իսկ երկրորդ պարամետրը հետ կանչի ֆունկցիան է:
  • հետո () – սա կատարվում է հատուկ ֆայլի բոլոր փորձարկումներից հետո:
  • յուրաքանչյուրից հետո () – սա կատարվում է յուրաքանչյուր առանձին թեստի դեպքից հետո:
  • նախքան () – աշխատում է նախքան հատուկ ֆայլի բոլոր թեստերը:
  • յուրաքանչյուրից առաջ () – կատարում է յուրաքանչյուր առանձին թեստային դեպքից առաջ:

Ինչպե՞ս գրել թեստային գործ:

Նախքան սկսելը, մենք պետք է իմանանք, թե ինչ է փորձարկման դեպքը, գրենք այն և որոնք են հիմնական թեստային գործի քայլերը:

1. Նախադրյալ – Հավելվածի վիճակը, որը մենք պատրաստվում ենք փորձարկել:

2. գործողություն – Մենք որոշակի գործողություն ենք կատարում հավելվածի վրա:

3. Պնդում – Մենք հաստատում կամ հաստատում ենք մեր գործողությունների վերաբերյալ փոխված վարքագիծը:

Մենք կքննարկենք LamdaGeeks դիմում մեր թեստի օրինակների համար: Նույն ընթացակարգով մենք կքննարկենք հետևյալ սցենարի ավտոմատացումը

1. Այցելեք կայք https://lambdageeks.com/

2. Ստուգեք, թե արդյոք վերնագիրը Գլխավոր է – Lambda Geeks
Cypress օգտագործում cy որպես իր տեսակի սահմանում: Մենք կլրացնենք cy ցանկացած մեթոդ կանչելու հրաման:
Նախ, եկեք ստեղծենք նոր ֆայլ մեր կոդի խմբագրիչում:

1. Ստեղծեք նոր թղթապանակ անունով Demo ինտեգրման թղթապանակի տակ:

Նոր ծալքի ստեղծումr

2. Դեմո թղթապանակի տակ ստեղծեք նոր ֆայլ նմուշ.js. Այս ֆայլում մենք կգրենք մեր առաջին փորձնական դեպքը:

Նոր ֆայլի ստեղծում

Հիմա եկեք սկսենք գրել մեր թեստի դեպքերը:

1. 1. Նախ, մենք կայցելենք էջը, օգտագործելով այցելություն () մեթոդ Cypress-ում. Այս հրամանը նավարկելու է դեպի մեր տրամադրած URL-ը: Մենք դրանք կներառենք describe() և it() բլոկի ներսում:

//type definition for Cypress object 'cy'
/// <reference types="cypress" />

describe("Testing the application", function() {
    it("launch the application", function() {
        // visit the lambdageeks page
        cy.visit('https://lambdageeks.com/')

2. Հավելվածը բացելուց հետո մենք կվավերացնենք վերնագիրը՝ օգտագործելով get() մեթոդ Cypress-ում .get() վերցնում է բոլոր css ընտրիչները DOM-ից:

Մենք մուտք ենք գործում վերնագիր՝ օգտագործելով title() մեթոդը, և մենք պնդում ենք, օգտագործելով Chai գրադարանը պետք է հրամանի միջոցով՝ առաջին պարամետրը հավասարեցնելով, կարճ ասած eq. Երկրորդ պարամետրը այն տողն է, որը մենք ակնկալում ենք:

 cy.title().should('eq','Home - Lambda Geeks')

Ուռա՜ Երկու պարզ քայլով մենք գրել ենք մեր Cypress Test գործը:

Ահա մեր թեստային գործի ամբողջական կոդը

//type definition for Cypress object 'cy'
/// <reference types="cypress" />

describe("Testing the application", function() {
    it("launch the application", function() {

        // visit the lambdageeks page
        cy.visit('https://lambdageeks.com/')

        // validate the title
        cy.title().should('eq','Home - Lambda Geeks')
       
    });
});
Cypress Օրինակ: Առաջին փորձնական դեպք

Cypress մուտքի օրինակ

Մենք կտեսնենք օրինակներ, թե ինչպես ավտոմատացնել մուտքի էջը Cypress-ի միջոցով: Ինչպես նախկինում տեսանք, Cypress-ով թեստ գրելը պարզ է: Այժմ եկեք ցատկենք դեպի տեքստային դաշտում արժեքները և պնդումները սահմանելու մեջ:

1. Մենք այցելում ենք կայք https://demo.applitools.com/ օգտագործելով cy.visit հրաման.

 cy.visit('https://demo.applitools.com/')

2. Մուտքագրեք օգտվողի անունը օգտանունի դաշտում՝ օգտագործելով type հրամանը: Մենք կփոխանցենք օգտվողի անունը որպես տող տիպի մեջ որպես պարամետր:

 cy.get('#username').type('test123')

3. Նմանապես, մենք գրում ենք նույն հրամանը գաղտնաբառը մուտքագրելու համար

 cy.get('#password').type('123')

4. Այժմ մենք սեղմում ենք մուտքի կոճակը՝ օգտագործելով click() մեթոդ Cypress-ում.

cy.get('#log-in').click();

5. Մուտք գործելուց հետո մենք վայրէջք ենք կատարում հավելվածի էջում: Այսպիսով, մենք պնդում ենք, որ URL-ն ունի /app ընդլայնում, օգտագործելով .include() բանալի բառ chai-ում: Պետք է առաջին պարամետրը այն բանալի բառն է, որը մենք պնդում ենք, իսկ երկրորդ պարամետրը ակնկալվող արդյունքն է:

cy.url().should('include', '/app')

Մենք գրել ենք մուտքի գործառույթի ամբողջական կոդը հինգ պարզ քայլով: Ստորև ներկայացված է ձեր տեղեկանքի ամբողջական կոդը:

//type definition for Cypress object 'cy'
/// <reference types="cypress" />

describe("Testing the application", function() {
    it("should login with username and password", function() {

        // visit the lambdageeks page
        cy.visit('https://demo.applitools.com/')

        cy.get('#username').type('test123')

        cy.get('#password').type('123')

        cy.get('#log-in').click();

        cy.url().should('include', '/app')

    });
});
Մուտք գործելու փորձնական դեպք

Cypress-ի գործարկման ընթացքում ընդհանուր խնդիրների լուծումներ և ՀՏՀ

Կարող են լինել որոշ ընդհանուր խնդիրներ, որոնց մենք կբախվենք Cypress-ը թողարկելու ժամանակ: Մենք կքննարկենք ընդհանուր հարցերից մի քանիսը:

1. «Cypress» հրամանը հնարավոր չէ գտնել Open Cypress հրամանի ժամանակ

Տեղադրվելուց հետո մենք պետք է փոխանցենք բաց cypress հրամանը նախագծի գրացուցակի արմատից: Օրինակ, դուք ստեղծել եք CypressProject անունով նախագիծ; դուք պետք է անցնեք npm init հրաման՝ անցնելով CypressProject թղթապանակ: Կարող եք նավարկել՝ տերմինալում տալով ստորև նշված հրամանը

cd CypressProject

Երբ դուք գտնվում եք նախագծի հիմքում, ապա անցեք npm init հրաման՝ կախվածությունները ներբեռնելու համար:

Այժմ Cypress-ը բացելու համար որոշ մարդիկ փորձում են նավարկել դեպի /node_modules թղթապանակը եւ այլն ./bin իսկ հետո փոխանցեք cypress open հրամանը: Այնուամենայնիվ, դա այդպես չի աշխատում: Այսպիսով, փոխարենը տվեք ամբողջ բաց հրամանը նախագծի գրացուցակի արմատից՝ Cypress-ը բացելու համար:

./node_modules/.bin/cypress open

Նաև զգույշ եղեք կտրվածքի հարցում'/'. Միշտ տրամադրեք սա'/' բացել Cypress.

2. Նոճի չի կարող բեռնվել, քանի որ գործարկվող սկրիպտներն անջատված են համակարգ

Երբ դուք տեղադրում եք Cypress-ը Windows-ում, երբեմն կարող եք հանդիպել վերը նշված սխալին: Դա պայմանավորված է անվտանգության բացառությամբ: Մենք կարող ենք լուծել այս սխալը՝ անցնելով ստորև նշված հրամանը PowerShell-ում:

Set-ExecutionPolicy RemoteSigned

Վերարտադրման քայլերը.

  • Բացեք PowerShell-ը
  • Գործարկել այս հրամանը Set-ExecutionPolicy RemoteSigned
  • Տիպ Yes
  • Այժմ բացեք Cypress-ը անցնելով ./node_modules/.bin/cypress open. Test Runner-ը կբացվի հիմա:

ՀՏՀ

1. Որո՞նք են Cypress-ի կողմից աջակցվող օպերացիոն համակարգերը:

Cypress աջակցում Mac, Windows, եւ Linux գործող համակարգեր:

2. Cypress-ն աջակցո՞ւմ է ավտոմատացմանը հայրենի բջջային հավելվածներում:

Cypress-ը երբեք չի կարողանա աշխատել բնիկ բջջային հավելվածով: Բայց մենք կարող ենք փորձարկել բջջային հավելվածները, որոնք գրված են Iconic Frameworks-ի նման բրաուզերում:

3. Արդյո՞ք Cypress-ն աջակցում է միայն Javascript-ի վրա հիմնված հավելվածներին:

Ո՛չ։ Cypress-ը կարող է փոխազդել ցանկացած վեբ բրաուզերի հետ, որոնք գրված են Ruby on Rails, Node, PHP, C# լեզուներով: Բայց մենք մեր թեստերը կգրենք Javascript-ով: Հակառակ դեպքում Cypress-ը կարող է փոխազդել ցանկացած առջևի, հետևի, լեզվի և շրջանակի հետ:

Cypress ավտոմատացում Քայլ առ քայլ. Cypress Architecture, Տեղադրեք Cypress

Այս ձեռնարկում մենք մանրամասն կքննարկենք Cypress Automation Framework-ը: Թե ինչ է Cypress-ը, ինչպես է այն տարբերվում այլ փորձարկման շրջանակներից, Cypress-ի ճարտարապետությունից և տեղադրման կարգից, մենք կքննարկենք այս հոդվածում: Cypress-ը հետաքրքիր թեմա է և նույնպես զվարճալի է սովորել: Եկեք սկսենք!

Cypress Automation Framework

Cypress Automation Framework-ը մաքուր Javascript-ի վրա հիմնված թեստավորման գործիք է, որը հիմնականում կենտրոնանում է ժամանակակից վեբ հավելվածների առջևի թեստավորման վրա: Cypress-ի միջոցով հավելվածները հեշտ է փորձարկել տեսողական ինտերֆեյսի միջոցով՝ ականատես լինելու թեստի կատարմանը: Այսպիսով, Cypress-ը պարգև է ինչպես մշակողների, այնպես էլ QA ինժեներների համար՝ հեշտացնելով սցենար գրելը և թեստի կատարումը: Բացի այդ, այն գալիս է տարբերակիչ թեստային վազորդով, որը հեշտացնում է DOM-ի մանիպուլյացիան և աշխատում է անմիջապես զննարկչի վրա:

Աղյուսակ Բովանդակության

Ի՞նչ է Cypress-ը:

Cypress-ը ավելի արագ է, ավելի լավը և ապահովում է վերջնական փորձարկում, որն աշխատում է բրաուզերի վրա: Cypress-ը հիմնականում համեմատվում է սելենի հետ, բայց այն բոլորովին այլ է: Cypress-ը չի անցնում սելենի գագաթին, ինչը նշանակում է, որ այն լիովին անկախ է: Փոխարենը, Cypress-ը աշխատում է Mocha-ի վրա, որը կրկին Javascript-ով հարուստ թեստային շրջանակ է: Այն համատեղելի է միայն Chai Assertion գրադարանի հետ, որը կարող է մուտք գործել BDD և TDD պնդումների լայն շրջանակ:

Cypress-ը հիմնականում կենտրոնանում է փորձարկման երեք տարբեր տեսակների վրա. Դրանք են End-to-End թեստերը, Unit թեստերը և Ինտեգրման թեստերը: Cypress-ը կարող է կատարել ցանկացած թեստ, որը կարող է գործարկվել բրաուզերում: Բացի այդ, այն գալիս է ծաղրելու տարբեր հնարավորություններով և վավերացումներով, որոնք հիացած են առջևի թեստավորման համար:

Cypress-ի աջակցող բրաուզերներն են՝ Chrome, Firefox, Edge, Electron և Brave: Ավելին, բրաուզերի միջոցով փորձարկումը հեշտությամբ հասանելի է Cypress-ի հետ: Ի վերջո, թեև Cypress-ն աջակցում է միայն Javascript-ին, այն կարող է գրվել նաև Typescript-ով, հիմնականում գրված Javascript-ով:

Cypress ավտոմատացում

Cypress-ը բաց կոդով գործիք է՝ անվճար թեստային վազողով, բայց ունի գներ թիմերի և ձեռնարկությունների համար, որտեղ նրանք ձեզանից գանձում են Dashboard-ի համար: Այնուամենայնիվ, Dashboard-ը որոշ չափով անվճար է, եթե չունեք լրացուցիչ գործառույթներ, ինչպիսիք են Flake-ի հայտնաբերումը, էլփոստի աջակցությունը, Jira-ի ինտեգրումը և շատ ավելին:

Cypress-ը հիմնականում օգտագործվում է համացանցում սկրիպտները ավտոմատացնելու համար (կարող է ավտոմատացնել այն ամենը, ինչ աշխատում է բրաուզերում): Այն երբեք չի կարող աշխատել բնիկ բջջային հավելվածների վրա, բայց կարող է ավտոմատացնել բջջային հավելվածների որոշ գործառույթներ, եթե դրանք մշակված են բրաուզերում:

Հատկություններ

Cypress-ում կան բազմաթիվ հիանալի հնարավորություններ, որոնք առանձնանում են ցանկացած այլ ավտոմատացման գործիքից: Այստեղ, եկեք քննարկենք որոշ հիմնական առանձնահատկություններ, և մենք կծանոթանանք մյուս մասերին ավելի ուշ, երբ սկսենք գրել մեր փորձարկման դեպքերը:

  1. Ավտոմատ սպասում – Cypress-ն ունի ավտոմատ սպասման առավելություն: Մենք երբեք կարիք չենք ունենա ավելացնելու ուժային սպասումներ և քնում, որպեսզի սպասենք, որ DOM-ը վերցնի տարրը: Cypress ավտոմատ կերպով սպասում է տարրերի հետ ցանկացած փոխազդեցության և պնդումների կատարման: Այսպիսով, թեստերը արագ են:
  2. Ժամանակային ճանապարհորդություն – Cypress-ը նկարում է սքրինշոթներ թեստի կատարման ընթացքում: Մենք կարող ենք տեսողականորեն դիտել արդյունքները իրական ժամանակում՝ պարզապես սավառնելով «Dashboard»-ում կատարված հրամանների վրա: Այս կերպ թեստերն ավելի հեշտ են կարգաբերում
  3. Վրիպազերծման թեստեր – Cypress-ը կարող է վրիպազերծել թեստերը հայտնի գործիքներից, ինչպիսիք են Developer tools-ը: Սխալները ընթեռնելի են, իսկ կույտերը՝ հեշտությամբ հետագծելի:
  4. Կոճղային հարցումներ – Cypress-ն ունի ընտրանքներ՝ հաստատելու և վերահսկելու գործառույթների վարքագիծը, ցանցային պատասխանները կամ ժմչփերը, որոնք օգտագործվում են կոճղերի և լրտեսների կողմից:
  5. Շարունակական ինտեգրում – Cypress-ը կախված չէ որևէ այլ լրացուցիչ CI ծառայություններից: Այնուամենայնիվ, թեստի համար հրամանը գործարկելիս ինտեգրումը հեշտությամբ հասանելի է:

Առասպել կիպրոսի մասին

Առասպել կա, որ Cypress-ը կարող է աշխատել միայն Javascript-ի համար հարմար վեբ հավելվածների վրա: Այնուամենայնիվ, Cypress-ը կարող է փորձարկել Django-ի, Ruby on Rails-ի, Laravel-ի և այլնի հետ կառուցված ցանկացած վեբ հավելված: Բացի այդ, Cypress-ն աջակցում է ծրագրավորման ցանկացած լեզու, ինչպիսիք են PHP, Python, Ruby, C# և այլն: Այնուամենայնիվ, մենք մեր թեստերը գրում ենք Javascript-ով: ; դրանից դուրս Cypress-ն աշխատում է ցանկացած հավելվածի վրա:

Cypress-ի բաղադրիչները

Cypress-ում կա երկու հիմնական բաղադրիչ. Նրանք են Փորձնական վազորդ և Կարգավորման հարթակ.

Նոճի
Cypress Test Runner
Cypress Test Feature

Փորձնական վազորդ – Cypress-ը տրամադրում է այս եզակի փորձնական վազորդը, որտեղ օգտագործողը կարող է դիտել հրամանները կատարման և փորձարկման ընթացքում կիրառման ընթացքում:

Փորձնական վազքի տակ կան մի քանի ենթաբաղադրիչներ: Նրանք են

  1. Հրամանների մատյան – Սա թեստային փաթեթի տեսողական ներկայացումն է: Դուք կարող եք տեսնել թեստում կատարված հրամանները, պնդման մանրամասները և թեստային բլոկները:
  2. Փորձարկման կարգավիճակի ընտրացանկ – Այս ընտրացանկը ցույց է տալիս անցած կամ ձախողված թեստային դեպքերի քանակը և կատարման համար պահանջվող ժամանակը:
  3. URL- ի նախադիտում – Սա ձեզ տեղեկատվություն է տալիս այն URL-ի մասին, որը դուք փորձարկում եք՝ հետևելու URL-ի բոլոր ուղիներին:
  4. Տեսադաշտի չափսերը – Դուք կարող եք սահմանել հավելվածի տեսադաշտի չափը՝ տարբեր արձագանքող դասավորությունները փորձարկելու համար
  5. Հավելվածի նախադիտում – Այս բաժինը ցուցադրում է իրական ժամանակում գործող հրամանները: Այստեղ դուք կարող եք օգտագործել Devtools-ը՝ յուրաքանչյուր բազան վրիպազերծելու կամ ստուգելու համար:

Գրասեղան: Cypress Dashboard-ը հնարավորություն է տալիս մուտք գործելու ձայնագրվող թեստերը: Dashboard ծառայության միջոցով մենք կարող ենք ականատես լինել անցած, ձախողված կամ բաց թողնված թեստերի քանակին: Բացի այդ, մենք կարող ենք դիտել ձախողված թեստերի նկարները՝ օգտագործելով cy: screenshot () հրամանը: Կարող եք նաև ականատես լինել ամբողջ թեստի տեսանյութին կամ ձախողված թեստերի հոլովակին։

Cypress Architecture

Փորձարկման գործիքների մեծ մասն աշխատում է բրաուզերից դուրս գտնվող սերվերի վրա և հրամաններ է կատարում ցանցի միջոցով: Բայց Cypress-ը աշխատում է զննարկիչով, որտեղ գործում է նաև հավելվածը: Այսպիսով, այն կարող է մուտք գործել բոլոր DOM տարրերը և զննարկիչի ներսում գտնվող ամեն ինչ:

Node սերվերը աշխատում է Cypress-ի հետևում հաճախորդի կողմից: Այսպիսով, հանգույցի սերվերը և Cypress-ը փոխազդում են միմյանց հետ, ուղեկցում և կատարում առաջադրանքներ՝ աջակցելու կատարմանը: Քանի որ այն հասանելի է ինչպես առջևի, այնպես էլ հետևի ծայրին, կատարման ընթացքում իրական ժամանակում հավելվածին արձագանքելը լավ է կատարվում և կարող է նաև կատարել առաջադրանքներ, որոնք նույնիսկ աշխատում են զննարկիչից դուրս:

Cypress Architecture

Cypress-ը նաև փոխազդում է ցանցային շերտի հետ և գրավում հրամանները կարդալով և փոխելով վեբ տրաֆիկը: Վերջապես, Cypress-ը HTTP հարցումներ և պատասխաններ է ուղարկում հանգույցի սերվերից դեպի դիտարկիչ: Քանի որ Cypress-ը գործում է ցանցային շերտում, այն օգնում է փոփոխել կոդը, որը կարող է խանգարել վեբ բրաուզերի ավտոմատացմանը: Node սերվերի և Browser-ի միջև հաղորդակցությունը իրականացվում է WebSocket-ի միջոցով, որը սկսում է իրականացվել վստահված անձի գործարկումից հետո:

Cypress-ը վերահսկում է բոլոր հրամանները, որոնք աշխատում են բրաուզերներից և դուրս են գալիս: Քանի որ այն տեղադրված է տեղական մեքենայում, այն ուղղակիորեն փոխազդում է օպերացիոն համակարգի հետ՝ տեսանյութեր ձայնագրելու, ակնթարթներ նկարահանելու, ցանցի շերտ մուտք գործելու և ֆայլային համակարգի գործառնությունները հեշտությամբ կատարելու համար: Cypress-ը կարող է մուտք գործել ամեն ինչ՝ սկսած DOM-ից, պատուհանի օբյեկտներից, տեղական պահեստից, ցանցային շերտից և DevTools-ից:

Տեղադրեք Cypress-ը

Այս բաժինը կքննարկի տեղադրման գործընթացը, որը պետք է հետևել նախքան մեր փորձարկման դեպքերը գրելը: Cypress-ը ներբեռնելու երկու տարբեր եղանակ կա: Նրանք են

  1. Տեղադրեք npm-ի միջոցով
  2. Ուղղակի ներբեռնում

Նախքան Cypress-ը տեղադրելը, մեզ կարող է անհրաժեշտ լինել մի քանի նախադրյալներ՝ npm-ի միջոցով տեղադրումը սկսելու համար: Տեսնենք դրանք մանրամասն։

Նախապայմանները

Մենք կպահանջենք որոշակի նախադրյալներ՝ նախքան մեր թեստային գործերը գրելը:

  • Ինչպես նշվեց վերևում, Cypress-ը աշխատում է հանգույցի սերվերի վրա. հետևաբար մենք ստիպված կլինենք տեղադրել Node.js-ը:
  • Նաև մեր թեստային դեպքերը գրելու համար մեզ անհրաժեշտ է կոդերի խմբագրիչ կամ IDE:

Այս օրինակում մենք կօգտագործենք Visual Studio կոդը: Այսպիսով, եկեք խորանանք մանրամասների մեջ:

Node.js-ի տեղադրում Mac-ում

Այստեղ մենք կքննարկենք Node.js-ը Mac-ում ներբեռնելու քայլերը: Նավարկեք դեպի https://nodejs.org/en/download/. Այժմ դուք կհայտնվեք ներբեռնման էջում:

Հանգույց փաթեթ macO-ում

1. Սեղմեք macOS Installer-ի վրա: Սեղմելով՝ կարող եք գտնել ստորև ներբեռնված փաթեթի ֆայլը: Սեղմեք pkg ֆայլի վրա՝ Node.js-ը տեղադրելու համար

Տեղադրիչի ներածություն

2. Երբ սեղմեք .pkg ֆայլը, կբացվի Node տեղադրիչը: Ներածության բաժինը տալիս է Node.js և npm տարբերակները: Սեղմեք Շարունակել

Համաձայնել լիցենզիա
Թույլատրել մուտքը Installer-ում

3. Սեղմեք Համաձայնել կոճակը և այնուհետև Շարունակել: Կհայտնվի թռուցիկ, որը թույլ կտա մուտք գործել դեպի ձեր ֆայլերը Ներբեռնման թղթապանակում: Սեղմեք Ok:

Ընտրեք նպատակակետը

4. Այս բաժնում կարող եք ընտրել այն նպատակակետը, որտեղ պետք է ներբեռնվի Node.js-ը: Կրկին, դուք կարող եք ընտրել ըստ ձեր համակարգի տարածքի: Այստեղ ես ընտրում եմ լռելյայն գտնվելու վայրը:

տեղադրում տեսակը
Տեղադրելու համար մուտքագրեք օգտվողի անունը և գաղտնաբառը

5. Սեղմեք Տեղադրել կոճակը: Հենց որ սեղմեք, կհայտնվի թռուցիկ, որը խնդրում է ձեր համակարգի գաղտնաբառը: Մուտքագրեք ձեր գաղտնաբառը և կտտացրեք Տեղադրեք ծրագրակազմը:

Տեղադրման ամփոփում

6. Ուռա՜ Մենք տեղադրել ենք Node.js և npm փաթեթը։ Սեղմեք Փակել՝ տեղադրումն ավարտելու համար:

Visual Studio կոդի տեղադրում Mac-ում

Մենք հաջողությամբ տեղադրեցինք Node.js-ը: Այժմ եկեք տեղադրենք մեր կոդի խմբագրիչը Visual Studio Code-ը: VS կոդը հզոր գործիք է, որն ունի Javascript-ի ներկառուցված բոլոր գործառույթները: Այսպիսով, եկեք սուզվենք Visual Studio Code-ի տեղադրման քայլերին:

Այստեղ մենք կքննարկենք Mac-ում VS կոդը ներբեռնելու քայլերը: Նախ, նավարկեք դեպի https://code.visualstudio.com/download վայրէջք կատարել VS կոդի ներբեռնման էջում։

VS Code Տեղադրում Mac-ում

1. Սեղմեք Mac պատկերակի վրա: Ներբեռնվող փաթեթը կարող եք տեսնել ստորև:

Տեղադրված փաթեթը zip-ում

2. Սեղմեք ներբեռնված ֆայլի վրա՝ փաթեթն անջատելու համար: Ապափափվելուց հետո կարող եք գտնել Visual Studio կոդը ձեր Ներբեռնումների մեջ Finder-ում:

VS կոդը ներբեռնումների մեջ

3. Ուռա՜ Մենք ներբեռնել ենք մեր կոդերի խմբագրիչը: Սեղմեք պատկերակի վրա՝ Visual Studio կոդը բացելու համար:

Նոր Cypress նախագծի ստեղծում

Այժմ մենք կտեսնենք, թե ինչպես ստեղծել նոր հանգույց նախագիծ մեր Visual Studio Code-ում: Երբ սեղմեք VS կոդը պատկերակը, դուք կհայտնվեք ողջույնի էջում: Հաջորդը, սեղմեք «Ավելացնել աշխատանքային տարածք» թղթապանակը՝ նոր թղթապանակ ստեղծելու համար:

Նոր նախագծի ստեղծում

Թղթապանակի վրա սեղմելուց հետո դուք կստանաք թռուցիկ՝ խնդրելով նոր թղթապանակ ավելացնել: Այժմ սեղմեք այն վայրը, որտեղ ցանկանում եք ավելացնել աշխատանքային տարածքը: Հաջորդը, սեղմեք Նոր թղթապանակը և ավելացրեք Թղթապանակի անունը որպես CypressProject և սեղմեք Բացել:

Նոր թղթապանակի ստեղծում

Այժմ մենք ստեղծել ենք թղթապանակ մեր Cypress թեստի համար: Նախքան մեր թեստերը գրելը, մենք պետք է տեղադրենք package.json ֆայլը: Նախքան տեղադրելը, եկեք հասկանանք, թե ինչ է package.json ֆայլը:

Ինչ է Package.json ֆայլը:

Package.json-ը ներառում է ֆայլի բոլոր npm փաթեթները, որոնք սովորաբար գտնվում են նախագծի արմատում: Այն սովորաբար գտնվում է Node.js նախագծի արմատային գրացուցակում: Այս ֆայլը պարունակում է նախագծի համար անհրաժեշտ բոլոր կիրառելի մետատվյալները: Այն տալիս է ամբողջ տեղեկատվությունը npm-ին և օգնում է բացահայտել նախագիծը և կարգավորել կախվածությունները: Package.json ֆայլը պարունակում է տեղեկություններ, ինչպիսիք են նախագծի անվանումը, տարբերակները, լիցենզիան, կախվածությունները և շատ ավելին:
Այժմ մենք հասկացանք, թե ինչ է package.json ֆայլը: Այսպիսով, եկեք սկսենք ֆայլը մեր Visual Studio կոդը ներբեռնելու քայլերը:

Բաց տերմինալ

1. Մեր հրամանները կատարելու համար մենք պետք է բացենք Տերմինալը: VS կոդի վերևում սեղմեք կոճակի վրա Տերմինալ. Երբ բացվում է բացվող ցանկը, սեղմեք Նոր տերմինալ.

Տեղադրեք package.json ֆայլը

2. Երբ տերմինալը բացվի, մուտքագրեք ստորև նշված հրամանը նախագծի գրացուցակում և սեղմեք Enter:

npm init

3. Enter սեղմելուց հետո դուք կարող եք տեսնել ցուցադրվող որոշակի տեղեկատվությունը: Դուք կարող եք մուտքագրել անհրաժեշտ մանրամասները Տերմինալում և սեղմել Enter՝ բոլոր դաշտերը ստանալու համար:

Ծրագրի մանրամասները
  • Փաթեթի անվանումը: Դուք կարող եք ցանկացած անուն տալ ձեր փաթեթին: Ես այն դատարկ եմ թողել, քանի որ այն նախապես լցված է մեր ստեղծած թղթապանակի անունով:
  • տարբերակՍա տալիս է npm-ի տարբերակի տեղեկատվությունը: Դուք կարող եք բաց թողնել սա և սեղմել Enter:
  • ՆկարագրությունԱյստեղ դուք կարող եք լրացուցիչ տեղեկատվություն տալ փաթեթին: Անհրաժեշտության դեպքում կարող եք մուտքագրել նկարագրությունը և կրկին սեղմել Enter:
  • Մուտքի կետՍա ներկայացնում է հավելվածի մուտքի կետը: Քանի որ այն նախապես լցված է index.js-ով, մենք կարող ենք բաց թողնել այս դաշտը և սեղմել Enter:
  • Փորձարկման հրամանՀրահանգ, որը տրվում է թեստը գործարկելու համար: Այստեղ անհրաժեշտ չէ որևէ հրաման տալ, բայց եթե պահանջվի, կարող եք անպայման ցանկացած հրաման տալ։
  • Git պահոցԱյս դաշտը պահանջում է git պահոց տանող ուղի: Այս դաշտը նույնպես կարող եք դատարկ թողնել:
  • KeywordsԵզակի հիմնաբառեր, որոնք կօգնեն բացահայտել նախագիծը: Դուք նույնպես կարող եք բաց թողնել այս դաշտը:
  • հեղինակՍա սովորաբար անձի օգտանունն է: Դուք կարող եք ավելացնել ձեր անունը և սեղմել Enter:
  • լիցենզիաԼիցենզիան նախապես համալրված է ISC-ով: Կարող եք շարունակել՝ սեղմելով Enter:
  • 4. Երբ սեղմեք Enter, տերմինալը կպահանջի հաստատում` նշելով ձեր տրամադրած բոլոր մանրամասները: Տիպ այո և կրկին սեղմեք Enter:
Package.json ֆայլի ստեղծման հաստատում

Այժմ մենք ստեղծել ենք package.json ֆայլ: Դուք կարող եք դիտել ֆայլը ձեր կոդի խմբագրիչում՝ մեր տրամադրած տեղեկություններով:

Ստեղծվել է Package.json ֆայլ

Cypress-ի տեղադրման քայլերը

Մենք տեղադրել ենք բոլոր նախադրյալները մեր Cypress-ի ներբեռնման, հանգույցի և սկզբնավորման npm-ի համար: Ինչպես նշվեց վերևում, Cypress-ը ներբեռնելու երկու եղանակ կա:

Ներբեռնեք Cypress-ը npm-ի միջոցով

Cypress-ը տեղադրելու համար դուք պետք է տերմինալում փոխանցեք ստորև նշված հրամանը: Բացի այդ, դուք պետք է հրաման տանք ծրագրի գրացուցակում հանգույցը տեղադրելու և փաթեթ.json ֆայլը ստեղծելու համար:

npm install cypress --save-dev
Cypress Installation հրաման

Հրամանն անցնելուց հետո այն կներբեռնի նախագծի համար անհրաժեշտ բոլոր համապատասխան կախվածությունները: Այս հոդվածը գրելիս Cypress-ի վերջին տարբերակն է 7.7.0. Տարբերակը կարող է տարբերվել ներբեռնման պահին:

Cypress-ի հաջող տեղադրում

Հղում կատարելով վերը նշված պատկերին, կարող եք տեսնել, որ մենք ներբեռնել ենք Cypress-ը: Դուք կարող եք ստուգել տերմինալում ներբեռնված ներկայացմամբ և package.json ֆայլում devDependencies ավելացնելով:

Ուղղակի ներբեռնում

Մենք կարող ենք ներբեռնել Cypress-ը անմիջապես իրենց CDN-ից, եթե դուք նախագծում չեք օգտագործում Node կամ npm փաթեթը: Այնուամենայնիվ, թեստերի ձայնագրումը վահանակում հնարավոր չէ ուղղակի ներբեռնման միջոցով:

Դուք կարող եք ներբեռնել՝ սեղմելով ներբեռնել Cypress-ը անմիջապես այստեղից ՈՒղեցույց. Այժմ սա ուղղակիորեն կներբեռնի փաթեթը: Փաթեթը ներբեռնելուց հետո բացեք zip ֆայլը և կրկնակի սեղմեք: Cypress-ը կաշխատի առանց որևէ կախվածության տեղադրման անհրաժեշտության: Այս ներբեռնումը միշտ կվերցնի վերջին տարբերակի հիման վրա, և հարթակն ինքնաբերաբար կհայտնաբերվի: Այնուամենայնիվ, Cypress-ը npm-ի միջոցով ներբեռնելը խորհուրդ է տրվում, քան ուղղակի ներբեռնումը:

Տեխնոլոգիաների վերաբերյալ լրացուցիչ հրապարակումների համար այցելեք մեր Տեխնոլոգիաների էջ.

Puppeteer Browser Class

Puppeteer Browser Class-ի հիանալի ուսումնական ուղեցույց (Ձեռնարկ 8)

Puppeteer-ը բաց կոդով հանգույցի js գրադարան է և օգտագործվում է վեբ ավտոմատացման, ինչպես նաև վեբ քերելու գործիք: Puppeteer-ի հետ աշխատելու համար ձեզ անհրաժեշտ է Javascript-ի և HTML DOM կառուցվածքի հիմնական իմացությունը: Puppeteer-ի այս ուսուցողական շարքը բաշխված է ստորև բերված հատվածներում, որոնք ձեզ կհամալրեն անհրաժեշտ փորձով Puppeteer-ի հետ աշխատելու համար: 

Տիկնիկավարի ձեռնարկ

Tosca ձեռնարկ #1: Տիկնիկավարի ակնարկ

Tosca Tutorial #2: Puppeteer միջավայրի փոփոխականներ

Tosca Tutorial #3: Puppeteer Web Scraping and Puppeteer Test Automation Overview

Tosca Tutorial #4: Տեղադրեք Puppeteer-ը

Tosca Tutorial #5: Տիկնիկավարի նախագծի նմուշ

Tosca Tutorial #6: Տիկնիկավարների ավտոմատացման փորձարկում

Tosca ձեռնարկ #7: Տիկնիկավարների դասարան

Tosca ձեռնարկ #8: Puppeteer Browser Class

Տոսկա Խնամակալական #9. Տիկնիկավարների էջի դաս

Այս «Puppeteer Browser Class» ձեռնարկում մենք ավելի խորը պատկերացում կունենանք ստորև նշված դասերի մասին, որոնք բաղկացած են կարևոր անվանատարածքներից, իրադարձություններից և այլ սպառիչ մեթոդներից, որոնք անհրաժեշտ են Puppeteer վեբ քերծման տեխնիկայի հետ աշխատելու համար:  

Տիկնիկագործ BrowserFetcher դաս

Puppeteer BrowserFetcher Class-ն օգտագործվում է դիտարկիչի տարբեր տարբերակները ներբեռնելու և կառավարելու համար: BrowserFetcher դասը գործում է վերանայման տողի վրա, որը սահմանում է chrome բրաուզերի տարբերակը: Վերանայման համարը կարելի է ստանալ այստեղ. Firefox-ի դեպքում այն ​​ամեն գիշեր ներբեռնում է զննարկիչը՝ հիմնվելով տարբերակի համարի վրա:

Ստորև բերված օրինակը ցույց է տալիս, թե ինչպես ներբեռնել և գործարկել Chrome բրաուզերը օգտագործելով BrowserFetcher դասը:

const browserFetcher = puppeteer.createBrowserFetcher();
const revInfo = await browserFetcher.download('766890');
const browserChrome= await puppeteer.launch({executablePath: revInfo.executablePath})

Հնարավոր չէ միաժամանակ աշխատել BrowserFetcher դասի մեկ այլ օրինակի հետ: BrowserFetcher դասի հաճախ օգտագործվող մեթոդները բացատրվում են հաջորդ բաժիններում:

Տիկնիկագործ BrowserFetcher Class – Մեթոդներ.

Ստորև բերված մեթոդները հասանելի են puppeteer browserfetcher դասում.

browserFetcher.canDownload (վերանայում) – Բրաուզերի վերանայման համարի օգնությամբ այս մեթոդը ստուգում է նշված բրաուզերի առկայությունը որպես վերնագրի հարցման մաս: Մեթոդը վերադարձնում է բուլյան արժեքը (true կամ false)՝ կախված առկայությունից:

const boolVar = browserFetcher.canDownload('766890');

browserFetcher.download (վերանայում[, progressCallback]) – Այս մեթոդը ներբեռնում է Chrome դիտարկիչը՝ օգտագործելով վերանայման համարի փաստարկը: Այստեղ progressCallback-ը կամընտիր արգումենտ է, որը ֆունկցիան կանչում է երկու արգումենտով՝ ներբեռնված բայթ և ընդհանուր բայթ: Այս մեթոդը վերադարձնում է վերանայման տեղեկատվությունը որպես խոստման օբյեկտ:

const revInfo = browserFetcher.download('766890');

browserFetcher.host() – Այն վերադարձնում է հոսթի անունը, որն օգտագործվում է բրաուզերի ներբեռնման համար:

const hostName = browserFetcher.host();

browserFetcher.localRevisions() – Այն վերադարձնում է բոլոր վերանայումների ցանկը, որոնք հասանելի են տեղական համակարգում:

const revList = browserFetcher.localRevisions();

browserFetcher.platform() – Այն վերադարձնում է հոսթի պլատֆորմի անունը, որը կլինի Mac-ի, Linux-ի, win32-ի կամ win64-ի որևէ մեկը:

const platformName = browserFetcher.platform();

browserFetcher.product() – Այն վերադարձնում է դիտարկիչի անունը, որը կլինի կամ chrome կամ firefox

const productName = browserFetcher.product();

browserFetcher.remove(վերանայում) – Այս մեթոդը օգտագործվում է ընթացիկ արտադրանքի/բրաուզերի համար նշված վերանայումը հեռացնելու համար: Այն վերադարձնում է խոստման օբյեկտը, որը լուծվում է գործընթացի ավարտից հետո:

const revInfo = browserFetcher.remove('766890');

browserFetcher.revisionInfo(revision) – Այն կվերադարձնի վերանայման տեղեկատվության վրա գտնվող օբյեկտ, որը ներառում է վերանայում, folderPath, executablePath, url, տեղական և արտադրանք:

const revInfo = browserFetcher.revisionInfo('766890');

Հղում Սեղմել այստեղ BrowserFetcher Class մեթոդների մասին ավելին իմանալու համար:

Տիկնիկագործ Բրաուզերի դաս

Puppeteer Browser դասը ստեղծվում է, երբ տիկնիկավարը գործարկել կամ միացրել է զննարկիչը՝ օգտագործելով տիկնիկավար.գործարկել or տիկնիկավար.միացնել մեթոդները:

Ստորև բերված օրինակը ցույց է տալիս, թե ինչպես ստեղծել «Browser» դասը և «Էջը»՝ օգտագործելով դիտարկիչի հղումը:

const puppeteer = require('puppeteer');
(async () => {
  const browserChrome = await puppeteer.launch();
  const pageChrome = await browserChrome.newPage();
  await pageChrome.goto('https://www.google.com');
  await browserChrome.close();
})();

Բրաուզերի դասի հաճախ օգտագործվող իրադարձությունները և մեթոդները բացատրվում են հաջորդ բաժնում:

Տիկնիկագործ Բրաուզերի դաս – Իրադարձություններ.

Ստորև նշված իրադարձությունները հասանելի են բրաուզերի դասում,

  • browser.on («անջատված») – Այս իրադարձությունը գործարկվում է, երբ զննարկիչը փակ է/խափանված է կամ բրաուզեր.անջատել մեթոդը կոչվում է.
  • browser.on ('targettchanged') – Այս իրադարձությունը գործարկվում է, երբ թիրախի url-ը փոխվել է:
  • browser.on ('targetcreated') – Այս իրադարձությունը գործարկվում է, երբ նոր էջը բացվում է նոր ներդիրում կամ պատուհանում՝ մեթոդով browser.newPage or պատուհան.բաց.
  • browser.on ('targetdestroyed') – Այս իրադարձությունը սկսվում է, երբ թիրախը ոչնչացվում է, այսինքն՝ էջը փակվում է:

Տիկնիկագործ Բրաուզերի դաս - մեթոդներ.

Ստորև բերված մեթոդները հասանելի են բրաուզերի դասում,

  • browser.browserContexts() – Այն վերադարձնում է բրաուզերի բոլոր համատեքստերի ցանկը: Նոր գործարկված բրաուզերի համար այս մեթոդը կվերադարձնի մեկ BrowserContext օրինակը:
  • browser.close() – Այս մեթոդն օգտագործվում է քրոմ-բրաուզերի բոլոր բաց էջերը փակելու համար: 

await browser.close();

  • browser.createIncognitoBrowserContext() – Այն ստեղծում/վերադարձնում է զննարկչի ինկոգնիտո համատեքստը, որը երբեք չի կիսի թխուկները կամ քեշը որևէ այլ դիտարկիչի համատեքստի հետ: Ստորև բերված օրինակում վեբ էջը (google) կբացվի ինկոգնիտո ռեժիմով:

(ասինկ () => {
  const chromeBrowser = սպասում puppeteer.launch();
  // Ստեղծեք նոր ինկոգնիտո դիտարկիչի համատեքստ:
  const համատեքստ = սպասում chromeBrowser.createIncognitoBrowserContext();
  const pageChrome = await context.newPage();
  սպասել էջChrome.goto ('https://www.google.com');
}) ();

  • browser.defaultBrowserContext() – Այն վերադարձնում է լռելյայն դիտարկիչի համատեքստը, որը չի կարող ոչնչացվել կամ փակվել:
  • browser.disconnect() – Դա կանջատի զննարկիչը տիկնիկավարից: Բայց այս դեպքում զննարկիչը կշարունակի աշխատել:
  • browser.isConnected() – Այս մեթոդը ստուգում է՝ արդյոք դիտարկիչը միացված է, թե ոչ: Չեկի հիման վրա այն կվերադարձնի բուլյան արժեքներ:

const boolFlag = await browser.isConnected();

  • browser.newPage() – Այս մեթոդը կստեղծի նոր էջ և կվերադարձնի էջի օրինակը:

const page = await browser.newPage();

  • browser.pages() – Այս մեթոդը վերադարձնում է բոլոր էջերի ցանկը, որոնք ներկայումս բաց վիճակում են:

const pageList = await browser.pages();

  • browser.process() – Այս մեթոդը վերադարձնում է ստեղծված բրաուզերի գործընթացը: Եթե ​​զննարկիչը ստեղծվել է օգտագործելով բրաուզեր.միացնել մեթոդը, և այն կվերադարձնի զրոյական արժեք:
  • browser.target() – Այս մեթոդը վերադարձնում է բրաուզերի հետ կապված թիրախը:

const target = սպասել browser.target();

  • browser.targets() – Այն վերադարձնում է բրաուզերի ներսում բոլոր ակտիվ թիրախների ցանկը:

const targetList = await browser.targets();

  • browser.userAgent() – Այն վերադարձնում է բրաուզերի սկզբնական գործակալի մասին խոստման օբյեկտը:
  • browser.version() – Այն վերադարձնում է բրաուզերի տարբերակը «HeadlessChrome/xx» ձևաչափով.x.xxxx.x' անգլուխ քրոմի համար և «Chrome/xx»:.x.xxxx.x' անգլուխ քրոմի համար: Ձևաչափը կարող է փոխվել ապագա թողարկման ժամանակ:
  • browser.waitForTarget (նախադրյալ[, ընտրանքներ]) – Այն կփնտրի բրաուզերի բոլոր համատեքստերում և կսպասի թիրախին:

await pageChrome.evaluate(() => window.open('https://lambdageeks.com/'));
const newWindowTarget = սպասել browser.waitForTarget(target => target.url() === 'https://lambdageeks.com/');

  • browser.wsEndpoint() – Այն վերադարձնում է բրաուզերի վեբ վարդակից url-ը:

const wsUrl = await browser.wsEndPoint();

Հղում Սեղմել այստեղ Բրաուզերի դասի իրադարձությունների և մեթոդների մասին ավելին իմանալու համար:

Տիկնիկագործ BrowserContext դաս

BrowserContext դասը օգնում է գործարկել բրաուզերի բազմաթիվ օրինակներ: Բրաուզերի օրինակը գործարկելուց հետո, լռելյայնորեն, օգտագործվում է մեկ BrowserContext: Այն բրաուզեր Chrome.newPage() մեթոդը էջ է ստեղծում լռելյայն BrowserContext դասի օբյեկտում: Եթե ​​վեբ էջը կանչում է մեկ այլ էջ, ապա նոր էջը պետք է պատկանի մայր էջի բրաուզերի համատեքստին: Այստեղ նոր էջը կարող է ստեղծվել՝ օգտագործելով որ window.open() մեթոդ է. 

Ստորև բերված օրինակում Puppeteer-ը հնարավորություն ունի ստեղծել դիտարկիչի համատեքստ «ինկոգնիտո» ռեժիմում: Բրաուզերի «ինկոգնիտո» համատեքստը որևէ տվյալ չի գրում պահեստում:

// Incognito browser context creation
const contextIncognito = await browserChrome.createIncognitoBrowserContext();
// New page creation through the browser context.
const pageChrome = await contextIncognito.newPage();
await pageChrome.goto('https://www.google.com');
//close context after use
await contextIncognito.close();

BrowserContext դասի հաճախ օգտագործվող իրադարձությունները և մեթոդները բացատրվում են հաջորդ բաժնում:

Տիկնիկագործ BrowserContext Class – Իրադարձություններ.

Ստորև նշված իրադարձությունները հասանելի են բրաուզերի համատեքստի դասում,

  • browserContext.on (նպատակային փոփոխված) – Այս իրադարձությունը գործարկվում է, երբ բրաուզերի համատեքստում թիրախի url-ը փոխվել է:
  • browserContext.on (ստեղծված թիրախ) – Այս իրադարձությունը գործարկվում է բրաուզերի ներսում համատեքստ ստեղծելուց հետո: Մեթոդները պատուհան.բաց և browserContext.newPage պատասխանատու են այս իրադարձության համար:
  • browserContext.on («թիրախը ոչնչացված է») – Այս իրադարձությունը սկսվում է, երբ թիրախը ոչնչացվում է դիտարկիչի համատեքստում:

Տիկնիկագործ BrowserContext Class – Մեթոդներ.

Ստորև բերված մեթոդները հասանելի են բրաուզերի համատեքստային դասում,

  • browserContext.browser() – Այս մեթոդը վերադարձնում է դիտարկիչի օբյեկտը, որը հասանելի է դիտարկիչի համատեքստում:
  • browserContext.clearPermissionOverrides() – Այս մեթոդը հեռացնում է բոլոր թույլտվությունների անտեսումները բրաուզերի համատեքստից: Ստորև բերված օրինակը ցույց է տալիս, թե ինչպես օգտագործել այս մեթոդը. 

const browserContext = browser.defaultBrowserContext();
browserContext.overridePermissions ('https://www.google.com', ['clipboard-read']);
browserContext.clearPermissionOverrides();

  • browserContext.close() – Այս մեթոդն օգտագործվում է դիտարկիչի համատեքստը փակելու կամ ոչնչացնելու համար: Բրաուզերի համատեքստում հասանելի բոլոր բրաուզերները կփակվեն:

browserContext.close();

  • browserContext.isIncognito() – Այս մեթոդը օգտագործվում է ստուգելու համար՝ արդյոք զննարկիչը ստեղծվել է «ինկոգնիտո» ռեժիմում, թե ոչ: Այն վերադարձնում է բուլյան արժեք (true – ինկոգնիտո ռեժիմ կամ false – ոչ ինկոգնիտո ռեժիմ)՝ հիմնված բրաուզերի ռեժիմի վրա: Լռելյայնորեն, ցանկացած բրաուզեր կանչվում է «ոչ ինկոգնիտո» ռեժիմում:

const boolIsIncognito = browserContext.isIncognito();

  • browserContext.newPage() – Այս մեթոդը օգտագործվում է նույն բրաուզերի համատեքստում նոր էջ ստեղծելու համար:

browserContext.newPage();

  • browserContext.overridePermissions (ծագում, թույլտվություն) – Այս մեթոդը օգտագործվում է սկզբնաղբյուրին, այսինքն՝ թիրախային url-ին նշված թույլտվությունը տրամադրելու համար: Տարբեր թույլտվություններ, որոնք հասանելի են տրամադրելու համար.
  • «աշխարհագրական տեղաբաշխում»
  • «midi-sysex» (համակարգի բացառիկ midi)
  • «միդի»
  • «հրել»
  • «տեսախցիկ»
  • «ծանուցումներ»
  • «խոսափող»
  • «միջավայրի լույսի սենսոր»
  • «արագացուցիչ»
  • «ֆոնային համաժամացում»
  • «գիրոսկոպ»
  • «մատչելիություն-միջոցառումներ»
  • «clipboard-read»
  • «մագնիսաչափ»
  • «clipboard-գրել»
  • «վճարման կառավարիչ»

Ստորև բերված օրինակը ցույց է տալիս, թե ինչպես կարելի է թույլտվություն տալ.

const browserContext = browser.defaultBrowserContext();
սպասել browserContext.overridePermissions ('https://www.google.com', ['geolocation']);

  • browserContext.pages() – Այս մեթոդը վերադարձնում է բրաուզերի համատեքստում հասանելի բոլոր բաց էջերի ցանկը: Ոչ մի անտեսանելի էջ այստեղ չի նշվի:

const openPageList = browserContext.pages();

  • browserContext.targets() – Այս մեթոդը վերադարձնում է բրաուզերի համատեքստում առկա բոլոր ակտիվ թիրախների ցանկը: Ոչ մի անտեսանելի էջ այստեղ չի նշվի:

const activeTargetList = browserContext.targets();

  • browserContext.waitForTarget (նախադրյալ[, ընտրանքներ]) – Այս մեթոդը օգտագործվում է սպասելու թիրախի հայտնվելուն և թիրախային օբյեկտը վերադարձնելու համար: «նախադրյալ» փաստարկը հիմնականում ֆունկցիայի կանչ է թիրախներից յուրաքանչյուրի համար: Բացի այդ, ըստ ցանկության, մենք կարող ենք փոխանցել որոշ կազմաձևման արժեքներ, ինչպիսիք են ժամանակի ավարտը որպես երկրորդ արգումենտ:
await pageChrome.evaluate(() => window.open('https://www.google.com/'));
const newWindowTarget = await browserContext.waitForTarget(target => target.url() === 'https://www.google.com/');

Հղում Սեղմել այստեղ BrowserContext դասի իրադարձությունների և մեթոդների մասին ավելին կարդալու համար:

Եզրակացություն.

Այս «Puppeteer Browser Class» ձեռնարկում մենք բացատրել ենք BrowserFetcher դասը, BrowserContext դասը և Browser դասը, որը ներառում է կարևոր անվանատարածքները (եթե այդպիսիք կան), իրադարձությունները (եթե այդպիսիք կան), և մեթոդները, որոնք հաճախ օգտագործվում են Puppeteer վեբ քերծման տեխնիկայում: օրինակներ. Հաջորդ հոդվածում մենք կբացատրենք Page, Frame և Dialog դասերը:

Տիկնիկավարների դասարան

Տիկնիկավարների դասի մեծ ուսումնական ուղեցույց (Ձեռնարկ 7)

Puppeteer-ը, որը բաց կոդով հանգույցի js գրադարան է, կարող է օգտագործվել որպես վեբ քերծող գործիք: Հրամանի տողի, Javascript-ի և HTML DOM կառուցվածքի իմացությունը պետք է լավ լինի սկսել այս տիկնիկավարի ձեռնարկից: Տիկնիկագործների շարքի ձեռնարկը բաշխված է ստորև ենթաբաժնի մեջ՝ լավ տիրապետելու Puppeteer-ին: 

Տիկնիկավարի ձեռնարկ

Տիկնիկագործ Ձեռնարկ #1: Տիկնիկավարի ակնարկ

Puppeteer Tutorial #2: Puppeteer միջավայրի փոփոխականներ

Տիկնիկագործ Ձեռնարկ #3: Puppeteer Web Scraping and Puppeteer Test Automation Overview

Տիկնիկագործ Ձեռնարկ #4: Տեղադրեք Puppeteer-ը

Տիկնիկագործ Ձեռնարկ #5: Տիկնիկավարի նախագծի նմուշ

Տիկնիկագործ Ձեռնարկ #6: Տիկնիկավարների ավտոմատացման փորձարկում

Տիկնիկագործ Ձեռնարկ #7: Տիկնիկավարների դասարան

Տիկնիկագործ Ձեռնարկ #8: Puppeteer Browser Class

Տիկնիկագործ Ձեռնարկ #9. Տիկնիկավարի էջի դաս

Այս «Puppeteer Class» ձեռնարկում մենք կբացատրենք ստորև բերված դասերը, որոնք ներառում են կարևոր անվանատարածքներ (եթե այդպիսիք կան), իրադարձություններ (եթե այդպիսիք կան) և մեթոդներ, որոնք հաճախ օգտագործվում են Puppeteer-ի վեբ քերման տեխնիկայում: 

Այս հոդվածում մենք կբացատրենք կարևոր բաղադրիչները օրինակներով:  

Տիկնիկավարների դասարան

Հայեցակարգային առումով դասը օբյեկտի նախագիծ է, որը սահմանում է հրահանգների մի շարք (փոփոխականներ և մեթոդներ): Այստեղ Puppeteer դասը սահմանվում է՝ օգտագործելով javascript՝ տարբեր գործողություններ կատարելու՝ վեբ քերծվածք կատարելու համար: Եկեք ստուգենք ստորև բերված օրինակը. Puppeteer դասի մոդուլն օգտագործվել է Chromium վեբ օրինակ գործարկելու համար:

const puppeteer = require('puppeteer');
(async () => {
  const browserChrome = await puppeteer.launch();
  const pageChrome = await browserChrome.newPage();
  await pageChrome.goto('https://www.google.com');
  // We can write steps here
  await browserChrome.close();
})();

Puppeteer դասը նաև տրամադրում է բազմաթիվ Անվանատարածքներ և Մեթոդներ, որոնք աջակցում են վեբ քերման գործընթացին: Հաճախ օգտագործվող Անվանատարածությունները և Մեթոդները բացատրվում են հաջորդ բաժիններում:

Տիկնիկագործների դասարան – Անվանատարածքներ.

Դա մի կոնտեյներ է, որը սահմանում է մի քանի նույնացուցիչներ, մեթոդներ, փոփոխականներ և այլն, Javascript-ում: Սա կոդը տրամաբանական և կազմակերպված կերպով խմբավորելու միջոց է: Ստորև բերված անունների տարածքները տրամադրված են Puppeteer դասի կողմից:

puppeteer.devices: Այն վերադարձնում է սարքերի ցանկը, որոնք կարող են օգտագործվել մեթոդով page.emulate (ընտրանքներ) շարժական սարքերում քերծվածք իրականացնելու համար: 

Օրինակ – Բացեք և փակեք Google-ի վեբ էջը բջջային սարքում –

const puppeteer = require('puppeteer');
const samsung = puppeteer.devices['Samsung J5'];
(async () => {
  const browserChrome = await puppeteer.launch();
  const pageChrome = await browserChrome.newPage();
  await pageChrome.emulate(samsung);
  await pageChrome.goto('https://www.google.com'); 
  await browserChrome.close();
})();

puppeteer.errors: Տիկնիկավարության տարբեր մեթոդներով աշխատելիս բացառությունների հնարավորություն կա: Հիմնականում, եթե մեթոդները չեն կարողանում կատարել հարցումները, դա սխալներ է թույլ տալիս: Կան տարբեր դասեր, որոնք սահմանվում են «puppeteer.errors» անվանատարածքի միջոցով սխալները կարգավորելու համար:

Օրինակ – page.waitForSelector մեթոդի համար, եթե վեբ տարրը չհայտնվի նշված ժամկետում, ապա կհայտնվի ժամանակի լրանալու սխալ: Խնդրում ենք անցնել ստորև բերված օրինակը, որը ցույց է տալիս ժամանակացույցը կարգավորելու մոտեցումը,

try {
  await page.waitForSelector('<web-element>');
} catch (err) {
  if (err instanceof puppeteer.errors.TimeoutError) {
    // Write code to handle the timeout error.
  }
} 

puppeteer.networkՊայմաններ. Այն վերադարձնում է ցանցի պայմանների ցանկը, որը կարող է օգտագործվել մեթոդի էջում.emulateNetworkConditions(networkConditions): Սահմանված է ցանցի պայմանների ամբողջական ցանկը այստեղ.

Օրինակ – Այս կոդի նմուշի միջոցով մենք կբացենք Google-ի վեբ էջը՝ օգտագործելով նախապես սահմանված ցանցային պայմանը:

const puppeteer = require('puppeteer');
const net = puppeteer.networkConditions['Fast 3G'];
(async () => {
  const browserChrome = await puppeteer.launch();
  const pageChrome = await browserChrome.newPage();
  await pageChrome.emulateNetworkConditions(net);
  await pageChrome.goto('https://www.google.com');
  await browserChrome.close();
})();

puppeteer.product: Այն վերադարձնում է բրաուզերի անունը, որը կօգտագործվի ավտոմատացման համար (Chrome կամ Firefox): Բրաուզերի արտադրանքը սահմանվում է կամ PUPPETEER_PRODUCT միջավայրի փոփոխականի կամ տիկնիկների դասի մեթոդով հասանելի արտադրանքի ընտրանքով puppeteer.launch ([ընտրանքներ]). Նախնական արժեքը Chrome-ն է:

Հղում Սեղմել այստեղ ավելին իմանալու համար Puppeteer Class անվանատարածքների մասին:

Տիկնիկավարների դաս - մեթոդներ.

Մեթոդները պարունակում են հայտարարություններ՝ կոնկրետ գործողություն կատարելու համար: Տիկնիկավարների դասը ունի հետևյալ մեթոդները.

puppeteer.clearCustomQueryHandlers() – Այն մաքրում է բոլոր գրանցված մշակողները:

puppeteer.connect (ընտրանքներ) – Այս մեթոդը օգտագործվում է տիկնիկավարը գոյություն ունեցող ցանկացած բրաուզերի հետ միացնելու համար: Այն վերադարձնում է տիպի խոստման օբյեկտ, որը ցույց է տալիս այս ասինխրոն գործընթացի կարգավիճակը: Օրինակ – Ստորև բերված օրինակում տիկնիկավարը անջատեք ընթացիկ դիտարկիչից և նորից միացեք,

const puppeteer = require('puppeteer');
(async () => {
  const browserChrome = await puppeteer.launch();
  // Copy the endpoint reference which will be reconnected later
  const endpoint = browserChrome.wsEndpoint();
  // Disconnect puppeteer
  browserChrome.disconnect();
  // Use the endpoint to re-connect
  const browserChrome2 = await puppeteer.connect({endpoint});
  // Close second instance of Chromium
  await browserChrome2.close();
})();

puppeteer.createBrowserFetcher ([ընտրանքներ]) – Այն ստեղծում է բրաուզերի առբերման օբյեկտ՝ բրաուզերների տարբեր տարբերակները (Chrome և Firefox) ներբեռնելու և կառավարելու համար:

const browserFetcher = puppeteer.createBrowserFetcher();

puppeteer.customQueryHandlerNames() – Այն վերադարձնում է an դասավորություն բոլոր գրանցված մաքսային հարցումների մշակողներից:

puppeteer.defaultArgs ([ընտրանքներ]) – Այն գործարկվելիս վերադարձնում է chrome բրաուզերի լռելյայն կազմաձևման տարբերակները որպես զանգված: Բացի այդ, մենք կարող ենք սահմանել բրաուզերի կարգավորելի ընտրանքները՝ օգտագործելով ընտրովի արգումենտ տարբերակը:

const args = puppeteer.defaultArgs();

puppeteer.executablePath() – Այն վերադարձնում է այն ուղին, որն ակնկալվում է տիկնիկավարի կողմից փաթեթավորված դիտարկիչի օրինակի համար: Այն ուղին, որը հասանելի չէր լինի ներբեռնման ժամանակ, բաց է թողնվել PUPPETEER_SKIP_DOWNLOAD միջավայրի փոփոխականի կողմից: Բացի այդ, մենք կարող ենք օգտագործել PUPPETEER_EXECUTABLE_PATH և PUPPETEER_CHROMIUM_REVISION միջավայրի փոփոխականները՝ ուղին փոխելու համար:

const args = puppeteer.executablePath();

puppeteer.launch ([ընտրանքներ]) – Այս տիկնիկային դասի մեթոդը օգտագործվում է վեբ բրաուզերը գործարկելու համար: Ընտրովի արգումենտի միջոցով մենք կարող ենք փոխանցել բրաուզերի տարբեր կոնֆիգուրացիաներ, ինչպիսիք են արտադրանքը (բրաուզերի անվանումը), headless, devtools և այլն: Այս մեթոդը վերադարձնում է խոստման օբյեկտը, որը պահում է գործարկված բրաուզերի հղումը:

const բրաուզեր = սպասում puppeteer.launch();

puppeteer.registerCustomQueryHandler(անուն, queryHandler) – Այն օգտագործվում է հատուկ հարցումների մշակիչ գրանցելու համար: Այստեղ «անունը» տրամադրում է հարցումների մշակողի անունը, իսկ «queryHandler»-ը սահմանում է իրական մաքսային հարցումների մշակիչը:

puppeteer.unregisterCustomQueryHandler(անուն) – Այն օգտագործվում է ցանկացած մաքսային հարցումների մշակողի գրանցումից հանելու համար:

Հղում Սեղմել այստեղ ավելին կարդալու համար Puppeteer Class մեթոդների մասին:

Թիրախային դաս

Թիրախային դասը տրամադրում է թիրախների հետ աշխատելու մեթոդներ: Առավել հաճախ օգտագործվող մեթոդները, որոնք հասանելի են թիրախային դասի հետ, բացատրվում են հաջորդ բաժնում:

Թիրախային դաս - մեթոդներ.

Ստորև բերված մեթոդները հասանելի են թիրախների դասում.

  • Target.browser() – Այն վերադարձնում է բրաուզերի օբյեկտը, որը կապված է թիրախին:
  • Target.browserContext() – Այն վերադարձնում է browserContext տեսակի օբյեկտ, որը կապված է թիրախին:
  • Target.createCDPSession() – Այն ստեղծում և վերադարձնում է Chrome-ի devtool արձանագրության նիստը, որը կցված է թիրախին:
  • Target.opener() – Այն վերադարձնում է թիրախը, որը բացում է այս թիրախը: Հիմնականում այս մեթոդը օգտագործվում է ծնող թիրախը ստանալու համար: Վերին մակարդակի թիրախի համար այն վերադարձնում է null:
  • Target.page() – Այն վերադարձնում է էջի օբյեկտ թիրախի։ Եթե ​​թիրախի տեսակը էջ չէ, այն վերադարձնում է զրոյական արժեք:
  • Target.type() – Այն օգտագործվում է թիրախի տեսակը ստանալու համար: Վերադարձի արժեքը կարող է լինել տարբերակներից մեկը՝ «background_page», «page», «shared_worker», «service_worker», «browser» կամ «այլ»:
  • Target.url() – Այն վերադարձնում է թիրախի url-ը:
  • Target.worker() – Այն վերադարձնում է webworker օբյեկտը: Վերադարձի արժեքը զրոյական է, եթե թիրախը ոչ «service_worker» է, ոչ էլ «shared_worker»:

Հղում Սեղմել այստեղ Թիրախային դասի մեթոդների մասին ավելին կարդալու համար:

ConsoleMessage դաս

ConsoleMessage դասի օբյեկտները ուղարկվում են ըստ էջերի վահանակի իրադարձության միջոցով: ConsolMessage դասի հաճախ օգտագործվող մեթոդները բացատրվում են հաջորդ բաժնում:

ConsoleMessage Class – Մեթոդներ.

Ստորև բերված մեթոդները հասանելի են ConsoleMessage դասում.

  • consoleMessage.args() – Այն վերադարձնում է JSHandler օբյեկտի զանգված: JSHandler-ը թույլ չի տալիս, որ կապակցված JS օբյեկտը հավաքվի աղբից մինչև բռնակի հեռացումը: Այն ինքնաբերաբար ոչնչացվում է, երբ ծնող բրաուզերի համատեքստը ոչնչացվում է:
  • consoleMessage.location() – Այն վերադարձնում է ռեսուրսի օբյեկտ, որը ներառում է ստորև նշված պարամետրերը:
  • url – Այն նշանակում է հայտնի ռեսուրսի URL-ը: Եթե ​​հայտնի չէ, կպահպանվի մի չսահմանված արժեքը:
  • LineNumber – Դա 0-ի վրա հիմնված տողի համարն է, որը հասանելի է ռեսուրսում: Եթե ​​հասանելի չէ, այն կպահպանվի մի չսահմանված արժեքը:
  • columNumber – Սա 0-ի վրա հիմնված սյունակի համարն է, որը հասանելի է ռեսուրսում: Եթե ​​հասանելի չէ, այն կպահպանվի մի չսահմանված արժեքը:
  • consoleMessage.stackTrace() - Այն վերադարձնում է օբյեկտների ցանկ (յուրաքանչյուր օբյեկտ վերաբերում է ռեսուրսին), որը ներառում է ստորև նշված պարամետրերը:
  • url – Այն նշանակում է հայտնի ռեսուրսի URL-ը: Եթե ​​հայտնի չէ, կպահպանվի մի չսահմանված արժեքը:
  • LineNumber – Դա 0-ի վրա հիմնված տողի համարն է, որը հասանելի է ռեսուրսում: Եթե ​​հասանելի չէ, այն կպահպանվի մի չսահմանված արժեքը:
  • columNumber – Սա 0-ի վրա հիմնված սյունակի համարն է, որը հասանելի է ռեսուրսում: Եթե ​​հասանելի չէ, այն կպահպանվի մի չսահմանված արժեքը:
  • consoleMessage.text() – Այն վերադարձնում է վահանակի տեքստը:
  •  consoleMessage.type() – Այն վերադարձնում է տողը որպես վահանակի հաղորդագրության տեսակ: Տեսակը կարող է լինել արժեքներից որևէ մեկը՝ log, debug, info, error, warning, dir, dirxml, table, trace, clear, startGroup, startGroupCollapsed, endGroup, assert, profile, profileEnd, count, timeEnd:

Հղում Սեղմել այստեղ ավելին իմանալու համար consoleMessage դասի մեթոդների մասին:

TimeoutError Class

Տարբեր տիկնիկավարների հետ աշխատելիս բացառությունների հնարավորություն կա: Հիմնականում, եթե մեթոդները չեն կարողանում կատարել հարցումները, դա սխալներ է թույլ տալիս: TimeoutError դասը օգտագործվում է այս տեսակի բացառությունները կարգավորելու համար:

TimeoutError Class-ի օրինակ – page.waitForSelector մեթոդի համար, եթե վեբ տարրը չհայտնվի նշված ժամկետում, ապա կհայտնվի ժամանակի լրանալու սխալ: Խնդրում ենք անցնել ստորև բերված օրինակը, որը ցույց է տալիս ժամանակացույցը կարգավորելու մոտեցումը,

try {
  await page.waitForSelector('<element>');
} catch (e) {
  if (e instanceof puppeteer.errors.TimeoutError) {
    // Write code to handle the error.
  }
} 

FileChooser դաս

Ֆայլի ընտրիչ դասի օբյեկտը ստեղծվում է մեթոդի միջոցով page.waitForFileChooser. FileChooser դասը օգտագործվում է ֆայլերի հետ փոխազդելու համար: FileChooser դասի հաճախ օգտագործվող մեթոդները բացատրվում են հաջորդ բաժնում:

FileChooser Class – Մեթոդներ.

Ստորև բերված մեթոդները հասանելի են FileChooser դասի համար.

  • fileChooser.accept(file_with_path) – Այս մեթոդը օգտագործվում է ցանկացած ֆայլ վերբեռնելու համար (որի համար ուղին տրված է որպես փաստարկ):
  • fileChooser.cancel() – Այս մեթոդն օգտագործվում է ֆայլի վերբեռնման գործընթացը չեղարկելու համար:
  • fileChooser.isMultiple () – Այս մեթոդը ստուգում է, արդյոք fileChooser-ը թույլ է տալիս ընտրել մի քանի արժեքներ: Այն վերադարձնում է բուլյան արտահայտություն (ճշմարիտ կամ կեղծ):

FileChooser դասի օրինակ –

const [fileChooser] = await Promise.all([
  page.waitForFileChooser(),
  page.click('#attach-button'), 
]);
await fileChooser.accept(['/puppeteer_proj/data/sample_file.pdf']);

Եզրակացություն.

Այս «Puppeteer Class» ձեռնարկում մենք բացատրել ենք Puppeteer դասը, Target դասը, MessageConsole դասը և TimeoutError դասը, որը ներառում է կարևոր անվանատարածքները (եթե այդպիսիք կան), իրադարձությունները (եթե այդպիսիք կան) և մեթոդները, որոնք հաճախ օգտագործվում են Puppeteer վեբ քերծման տեխնիկայում: օրինակներով։ Հաջորդ հոդվածում մենք կբացատրենք BrowserContext, Browser և BrowserContext Class: