ஒத்திசைவிலிருந்து ஒத்திசைவற்றதற்கு

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

JavaScript இல் உறுதிமொழிகள் (Promises)

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

ஒத்திசைவற்ற மாற்றம்

WebdriverIO சோதனை இயக்கி ஒரே சோதனை தொகுப்பில் ஒத்திசைவற்ற மற்றும் ஒத்திசைவு செயல்பாட்டைக் கையாள முடியும். இதன் பொருள் உங்கள் வேகத்தில் படிப்படியாக உங்கள் சோதனைகள் மற்றும் PageObjects ஐ மெதுவாக மாற்றலாம். எடுத்துக்காட்டாக, Cucumber Boilerplate உங்கள் திட்டத்தில் நகலெடுக்க பெரிய அளவிலான படி வரையறைகளை வரையறுத்துள்ளது. நாம் ஒரு படி வரையறையை அல்லது ஒரு கோப்பை ஒரு நேரத்தில் மாற்றலாம்.

குறிப்பு

WebdriverIO ஒரு codemod ஐ வழங்குகிறது, இது உங்கள் ஒத்திசைவு குறியீட்டை கிட்டத்தட்ட முழுமையாக தானாகவே ஒத்திசைவற்ற குறியீடாக மாற்ற அனுமதிக்கிறது. ஆவணங்களில் விளக்கப்பட்டுள்ளபடி codemod ஐ முதலில் இயக்கி, தேவைப்பட்டால் கைமுறையாக மாற்றுவதற்கு இந்த வழிகாட்டியைப் பயன்படுத்தவும்.

பல சந்தர்ப்பங்களில், WebdriverIO கட்டளைகளை அழைக்கும் செயல்பாட்டை async ஆக மாற்றி, ஒவ்வொரு கட்டளைக்கும் முன் await சேர்ப்பது மட்டுமே தேவை. boilerplate திட்டத்தில் முதல் கோப்பு clearInputField.ts ஐ மாற்றுவதற்கு, இதிலிருந்து மாற்றுகிறோம்:

export default (selector: Selector) => {
    $(selector).clearValue();
};

இதற்கு:

export default async (selector: Selector) => {
    await $(selector).clearValue();
};

அவ்வளவுதான். அனைத்து மறுஎழுதல் எடுத்துக்காட்டுகளுடன் முழுமையான கமிட்டை இங்கே காணலாம்:

கமிட்கள்:

• அனைத்து படி வரையறைகளையும் மாற்றுதல் [af6625f]

தகவல்

இந்த மாற்றம் நீங்கள் TypeScript ஐப் பயன்படுத்துகிறீர்களா இல்லையா என்பதைப் பொருட்படுத்தாது. நீங்கள் TypeScript ஐப் பயன்படுத்தினால், உங்கள் tsconfig.json இல் types பண்பை webdriverio/sync இலிருந்து @wdio/globals/types க்கு மாற்றுவதை உறுதிசெய்யவும். உங்கள் தொகுப்பு இலக்கு குறைந்தபட்சம் ES2018 ஆக அமைக்கப்பட்டுள்ளதை உறுதிசெய்யவும்.

சிறப்பு வழக்குகள்

நீங்கள் சற்று கூடுதல் கவனம் செலுத்த வேண்டிய சிறப்பு வழக்குகள் எப்போதும் உள்ளன.

ForEach சுழற்சிகள்

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

const elems = $$('div')
elems.forEach((elem) => {
    elem.click()
})

forEach இல் நாம் செலுத்தும் செயல்பாடு ஒரு சுழற்சி செயல்பாடாகும். ஒத்திசைவான உலகில், அடுத்த கட்டளைக்கு செல்வதற்கு முன் அனைத்து உறுப்புகளையும் கிளிக் செய்யும். இதை ஒத்திசைவற்ற குறியீடாக மாற்றும்போது, ஒவ்வொரு சுழற்சி செயல்பாடும் செயல்பாட்டை முடிக்க நாம் காத்திருப்பதை உறுதிசெய்ய வேண்டும். async/await சேர்ப்பதன் மூலம், இந்த சுழற்சி செயல்பாடுகள் நாம் தீர்க்க வேண்டிய உறுதிமொழியை திருப்பித் தரும். இப்போது, forEach உறுப்புகளை சுழற்றுவதற்கு சிறந்ததல்ல, ஏனெனில் அது சுழற்சி செயல்பாட்டின் முடிவை, அதாவது நாம் காத்திருக்க வேண்டிய உறுதிமொழியை திருப்பித் தராது. எனவே நாம் forEach ஐ map உடன் மாற்ற வேண்டும், இது அந்த உறுதிமொழியை திருப்பி அளிக்கும். map மற்றும் find, every, reduce போன்ற அணிகளின் அனைத்து சுழற்சி முறைகளும் உறுதிமொழிகளை மதிக்கும் வகையில் அமைக்கப்பட்டுள்ளன, எனவே ஒத்திசைவற்ற சூழலில் பயன்படுத்த எளிதாக்கப்பட்டுள்ளன. மேலே உள்ள எடுத்துக்காட்டு மாற்றப்பட்ட பின் இவ்வாறு தோன்றும்:

const elems = await $$('div')
await elems.forEach((elem) => {
    return elem.click()
})

எடுத்துக்காட்டாக, அனைத்து <h3 /> உறுப்புகளையும் பெற்று அவற்றின் உரை உள்ளடக்கத்தைப் பெற, நீங்கள் இயக்கலாம்:

await browser.url('https://webdriver.io')

const h3Texts = await browser.$$('h3').map((img) => img.getText())
console.log(h3Texts);
/**
 * returns:
 * [
 *   'Extendable',
 *   'Compatible',
 *   'Feature Rich',
 *   'Who is using WebdriverIO?',
 *   'Support for Modern Web and Mobile Frameworks',
 *   'Google Lighthouse Integration',
 *   'Watch Talks about WebdriverIO',
 *   'Get Started With WebdriverIO within Minutes'
 * ]
 */

இது மிகவும் சிக்கலானதாகத் தோன்றினால், எளிய for சுழற்சிகளைப் பயன்படுத்த நீங்கள் பரிசீலிக்கலாம், எ.கா.:

const elems = await $$('div')
for (const elem of elems) {
    await elem.click()
}

WebdriverIO உறுதிப்படுத்தல்கள்

நீங்கள் WebdriverIO உறுதிப்படுத்தல் உதவியாளர் expect-webdriverio ஐப் பயன்படுத்தினால், ஒவ்வொரு expect அழைப்புக்கும் முன் await வைக்க உறுதிசெய்யவும், எ.கா.:

expect($('input')).toHaveAttributeContaining('class', 'form')

இவ்வாறு மாற்றப்பட வேண்டும்:

await expect($('input')).toHaveAttributeContaining('class', 'form')

ஒத்திசைவு PageObject முறைகள் மற்றும் ஒத்திசைவற்ற சோதனைகள்

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

class MyPageObject extends Page {
    /**
     * define elements
     */
    get btnStart () { return $('button=Start') }
    get loadedPage () { return $('#finish') }

    someMethod () {
        // sync code
    }

    someMethodAsync () {
        // async version of MyPageObject.someMethod()
    }
}

மாற்றத்தை முடித்தவுடன், ஒத்திசைவு PageObject முறைகளை நீக்கி, பெயரிடுதலைச் சுத்தப்படுத்தலாம்.

PageObject முறையின் இரண்டு வெவ்வேறு பதிப்புகளைப் பராமரிக்க விரும்பவில்லை என்றால், முழு PageObject ஐ ஒத்திசைவற்றதாக மாற்றி, ஒத்திசைவு சூழலில் முறையை இயக்க browser.call ஐப் பயன்படுத்தலாம், எ.கா.:

// before:
// MyPageObject.someMethod()
// after:
browser.call(() => MyPageObject.someMethod())

call கட்டளை, அடுத்த கட்டளைக்கு செல்வதற்கு முன் ஒத்திசைவற்ற someMethod தீர்க்கப்படுவதை உறுதிசெய்யும்.

முடிவுரை

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