पेज ऑब्जेक्ट पैटर्न

WebdriverIO के संस्करण 5 को पेज ऑब्जेक्ट पैटर्न समर्थन को ध्यान में रखकर डिजाइन किया गया था। "तत्वों को प्रथम श्रेणी के नागरिकों के रूप में" सिद्धांत की शुरुआत करके, अब इस पैटर्न का उपयोग करके बड़े परीक्षण सूट बनाना संभव है।

पेज ऑब्जेक्ट बनाने के लिए किसी अतिरिक्त पैकेज की आवश्यकता नहीं है। यह पता चला है कि स्वच्छ, आधुनिक कक्षाएं हमें आवश्यक सभी सुविधाएं प्रदान करती हैं:

• पृष्ठ वस्तुओं के बीच वंशानुक्रम
• तत्वों का आलसी लोडिंग
• तरीकों और कार्यों का कैप्सूलीकरण

पृष्ठ वस्तुओं का उपयोग करने का लक्ष्य किसी भी पृष्ठ की जानकारी को वास्तविक परीक्षणों से अलग करना है। आदर्श रूप से, आपको सभी चयनकर्ताओं या विशिष्ट निर्देशों को पृष्ठ ऑब्जेक्ट में संग्रहीत करना चाहिए जो किसी विशेष पृष्ठ के लिए अद्वितीय हैं, ताकि आप अपने पृष्ठ को पूरी तरह से फिर से डिज़ाइन करने के बाद भी अपना परीक्षण चला सकें।

पेज ऑब्जेक्ट बनाना

सबसे पहले, हमें एक मुख्य पेज ऑब्जेक्ट चाहिए जिसे हम Page.jsकहते हैं। इसमें सामान्य चयनकर्ता या विधियाँ होंगी जो सभी पृष्ठ वस्तुओं से प्राप्त होंगी।

// Page.js
export default class Page {
    constructor() {
        this.title = 'My Page'
    }

    async open (path) {
        await browser.url(path)
    }
}

हम हमेशा पृष्ठ ऑब्जेक्ट का एक उदाहरण export करेंगे, और उस उदाहरण को परीक्षण में कभी नहीं बनाएंगे। चूँकि हम एंड-टू-एंड टेस्ट लिख रहे हैं, हम हमेशा पेज को एक स्टेटलेस कंस्ट्रक्शन—के रूप में मानते हैं जैसे कि प्रत्येक HTTP रिक्वेस्ट एक स्टेटलेस कंस्ट्रक्शन है।

ज़रूर, ब्राउज़र सत्र की जानकारी ले सकता है और इसलिए अलग-अलग सत्रों के आधार पर अलग-अलग पृष्ठ प्रदर्शित कर सकता है, लेकिन यह पृष्ठ ऑब्जेक्ट के भीतर प्रदर्शित नहीं होना चाहिए। इस प्रकार के राज्य परिवर्तन आपके वास्तविक परीक्षणों में रहने चाहिए।

आइए पहले पन्ने का परीक्षण शुरू करें। डेमो उद्देश्यों के लिए, हम गिनी पिग के रूप में एलिमेंटल सेलेनियम द्वारा इंटरनेट वेबसाइट का उपयोग करते हैं। आइए लॉगिन पेजके लिए पेज ऑब्जेक्ट उदाहरण बनाने का प्रयास करें।

Get अपने चयनकर्ताओं को प्राप्त करें

पहला कदम उन सभी महत्वपूर्ण चयनकर्ताओं को लिखना है जो हमारे login.page ऑब्जेक्ट में गेट्टर फ़ंक्शंस के रूप में आवश्यक हैं:

// login.page.js
import Page from './page'

class LoginPage extends Page {

    get username () { return $('#username') }
    get password () { return $('#password') }
    get submitBtn () { return $('form button[type="submit"]') }
    get flash () { return $('#flash') }
    get headerLinks () { return $$('#header a') }

    async open () {
        await super.open('login')
    }

    async submit () {
        await this.submitBtn.click()
    }

}

export default new LoginPage()

गेट्टर फ़ंक्शंस में चयनकर्ताओं को परिभाषित करना थोड़ा अजीब लग सकता है, लेकिन यह वास्तव में उपयोगी है। _जब आप संपत्ति का प्रयोग करते हैं _इन कार्यों का मूल्यांकन किया जाता है, जब आप ऑब्जेक्ट उत्पन्न नहीं करते हैं। इसके साथ आप उस पर कार्रवाई करने से पहले हमेशा तत्व का अनुरोध करते हैं।

चेनिंग कमांड

WebdriverIO आंतरिक रूप से कमांड के अंतिम परिणाम को याद रखता है। यदि आप एक एक्शन कमांड के साथ एक एलिमेंट कमांड को चेन करते हैं, तो यह पिछले कमांड से एलिमेंट ढूंढता है और एक्शन को निष्पादित करने के लिए परिणाम का उपयोग करता है। इसके साथ आप चयनकर्ता (पहला पैरामीटर) को हटा सकते हैं और आदेश उतना ही सरल दिखता है:

await LoginPage.username.setValue('Max Mustermann')

जो मूल रूप से वही है:

let elem = await $('#username')
await elem.setValue('Max Mustermann')

या

await $('#username').setValue('Max Mustermann')

अपने परीक्षणों में पृष्ठ वस्तुओं का उपयोग करना

पृष्ठ के लिए आवश्यक तत्वों और विधियों को परिभाषित करने के बाद, आप इसके लिए परीक्षण लिखना शुरू कर सकते हैं। पेज ऑब्जेक्ट का उपयोग करने के लिए आपको केवल import (या require) करना है। इतना ही!

चूंकि आपने पृष्ठ ऑब्जेक्ट का पहले से निर्मित उदाहरण निर्यात किया है, इसे आयात करने से आप तुरंत इसका उपयोग करना शुरू कर सकते हैं।

यदि आप अभिकथन ढांचे का उपयोग करते हैं, तो आपके परीक्षण और भी अभिव्यंजक हो सकते हैं:

// login.spec.js
import LoginPage from '../pageobjects/login.page'

describe('login form', () => {
    it('should deny access with wrong creds', async () => {
        await LoginPage.open()
        await LoginPage.username.setValue('foo')
        await LoginPage.password.setValue('bar')
        await LoginPage.submit()

        await expect(LoginPage.flash).toHaveText('Your username is invalid!')
    })

    it('should allow access with correct creds', async () => {
        await LoginPage.open()
        await LoginPage.username.setValue('tomsmith')
        await LoginPage.password.setValue('SuperSecretPassword!')
        await LoginPage.submit()

        await expect(LoginPage.flash).toHaveText('You logged into a secure area!')
    })
})

संरचनात्मक पक्ष से, यह अलग-अलग निर्देशिकाओं में विशिष्ट फ़ाइलों और पृष्ठ वस्तुओं को अलग करने के लिए समझ में आता है। इसके अतिरिक्त आप प्रत्येक पृष्ठ वस्तु को अंत: .page.jsदे सकते हैं। इससे यह और स्पष्ट हो जाता है कि आप एक पेज ऑब्जेक्ट आयात करते हैं।

आगे बढ़ना

यह WebdriverIO के साथ पेज ऑब्जेक्ट लिखने का मूल सिद्धांत है। लेकिन आप इससे कहीं अधिक जटिल पेज ऑब्जेक्ट स्ट्रक्चर बना सकते हैं! उदाहरण के लिए, आपके पास मोडल के लिए विशिष्ट पेज ऑब्जेक्ट हो सकते हैं, या एक विशाल पेज ऑब्जेक्ट को अलग-अलग वर्गों में विभाजित कर सकते हैं (प्रत्येक समग्र वेब पेज के एक अलग हिस्से का प्रतिनिधित्व करते हैं) जो मुख्य पेज ऑब्जेक्ट से प्राप्त होता है। पैटर्न वास्तव में आपके परीक्षणों से पृष्ठ की जानकारी को अलग करने के लिए बहुत सारे अवसर प्रदान करता है, जो आपके परीक्षण सूट को संरचित और ऐसे समय में स्पष्ट रखने के लिए महत्वपूर्ण है जब परियोजना और परीक्षणों की संख्या बढ़ती है।

आप यह उदाहरण (और इससे भी अधिक पेज ऑब्जेक्ट उदाहरण) GitHub पर example फ़ोल्डर में पा सकते हैं।