பக்கப் பொருள் முறை

WebdriverIO இன் 5ஆம் பதிப்பு பக்கப் பொருள் முறை ஆதரவுடன் வடிவமைக்கப்பட்டுள்ளது. "முதல் வகுப்பு குடிமக்களாக உறுப்புகள்" என்ற கொள்கையை அறிமுகப்படுத்துவதன் மூலம், இந்த முறையைப் பயன்படுத்தி பெரிய சோதனை தொகுப்புகளை உருவாக்குவது இப்போது சாத்தியமாகிறது.

பக்கப் பொருட்களை உருவாக்க கூடுதல் தொகுப்புகள் எதுவும் தேவையில்லை. சுத்தமான, நவீன வகுப்புகள் நமக்குத் தேவையான அனைத்து அம்சங்களையும் வழங்குகின்றன:

• பக்கப் பொருட்களுக்கு இடையே மரபுரிமை
• உறுப்புகளின் சோம்பல் ஏற்றுதல்
• முறைகள் மற்றும் செயல்களின் உறைகள்

பக்கப் பொருட்களைப் பயன்படுத்துவதன் நோக்கம் எந்தவொரு பக்கத் தகவலையும் உண்மையான சோதனைகளிலிருந்து பிரித்தெடுப்பதாகும். இலட்சிய நிலையில், உங்கள் பக்கத்தை முற்றிலும் மறுவடிவமைத்த பிறகும் உங்கள் சோதனையை இயக்கக்கூடிய வகையில், ஒரு குறிப்பிட்ட பக்கத்திற்கு தனித்துவமான அனைத்து தேர்வாளர்கள் அல்லது குறிப்பிட்ட வழிமுறைகளை ஒரு பக்கப் பொருளில் சேமிக்க வேண்டும்.

ஒரு பக்கப் பொருளை உருவாக்குதல்

முதலில், Page.js என்று அழைக்கப்படும் ஒரு முக்கிய பக்கப் பொருள் நமக்குத் தேவை. இது அனைத்து பக்கப் பொருட்களும் மரபுரிமையாகப் பெறும் பொதுவான தேர்வாளர்கள் அல்லது முறைகளைக் கொண்டிருக்கும்.

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

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

நாம் எப்போதும் ஒரு பக்கப் பொருளின் நிகழ்வை export செய்வோம், அந்த நிகழ்வை சோதனையில் உருவாக்க மாட்டோம். நாம் முடிவிலிருந்து-முடிவு வரை சோதனைகளை எழுதுவதால், நாம் எப்போதும் பக்கத்தை ஒரு நிலையற்ற கட்டமைப்பாகக் கருதுகிறோம்—ஒவ்வொரு HTTP கோரிக்கையும் ஒரு நிலையற்ற கட்டமைப்பாக இருப்பது போல.

நிச்சயமாக, உலாவி அமர்வுத் தகவலைக் கொண்டு செல்லக்கூடும், எனவே வெவ்வேறு அமர்வுகளின் அடிப்படையில் வெவ்வேறு பக்கங்களைக் காட்டலாம், ஆனால் இது ஒரு பக்கப் பொருளுக்குள் பிரதிபலிக்கக்கூடாது. இந்த வகையான நிலை மாற்றங்கள் உங்கள் உண்மையான சோதனைகளில் இருக்க வேண்டும்.

முதல் பக்கத்தை சோதிக்கத் தொடங்குவோம். விளக்க நோக்கங்களுக்காக, Elemental Selenium இன் The Internet வலைத்தளத்தை கினியா பன்றியாகப் பயன்படுத்துகிறோம். உள்நுழைவு பக்கத்திற்கான பக்கப் பொருள் எடுத்துக்காட்டை உருவாக்க முயற்சிப்போம்.

Get -ing உங்கள் தேர்வாளர்கள்

முதல் படி என்னவென்றால், நமது 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!')
    })
})

கட்டமைப்பு பக்கத்திலிருந்து, spec கோப்புகள் மற்றும் பக்கப் பொருட்களை வெவ்வேறு கோப்பகங்களாகப் பிரிப்பது அர்த்தமுள்ளதாக இருக்கும். கூடுதலாக, ஒவ்வொரு பக்கப் பொருளுக்கும் முடிவை கொடுக்கலாம்: .page.js. இது நீங்கள் ஒரு பக்கப் பொருளை இறக்குமதி செய்கிறீர்கள் என்பதை தெளிவாக்குகிறது.

மேலும் செல்வது

இது WebdriverIO உடன் பக்கப் பொருட்களை எவ்வாறு எழுதுவது என்பதற்கான அடிப்படை கொள்கையாகும். ஆனால் நீங்கள் இதை விட மிகவும் சிக்கலான பக்கப் பொருள் கட்டமைப்புகளை உருவாக்கலாம்! எடுத்துக்காட்டாக, உங்களிடம் மோடல்களுக்கான குறிப்பிட்ட பக்கப் பொருட்கள் இருக்கலாம், அல்லது ஒரு பெரிய பக்கப் பொருளை வெவ்வேறு வகுப்புகளாகப் பிரிக்கலாம் (ஒவ்வொன்றும் ஒட்டுமொத்த இணையப் பக்கத்தின் வெவ்வேறு பகுதியைக் குறிக்கிறது) அவை முக்கிய பக்கப் பொருளிலிருந்து மரபுரிமையாகப் பெறுகின்றன. திட்டம் மற்றும் சோதனைகளின் எண்ணிக்கை வளரும் சமயங்களில் உங்கள் சோதனை தொகுப்பை கட்டமைக்கப்பட்டதாகவும் தெளிவாகவும் வைத்திருக்க பக்கத் தகவலை உங்கள் சோதனைகளிலிருந்து பிரிப்பது முக்கியம் என்பதால், இந்த முறை உண்மையில் பல வாய்ப்புகளை வழங்குகிறது.

இந்த எடுத்துக்காட்டை (மற்றும் மேலும் பல பக்கப் பொருள் எடுத்துக்காட்டுகளை) GitHub இல் example கோப்புறையில் காணலாம்.