ஸ்னாப்ஷாட்

ஸ்னாப்ஷாட் சோதனைகள் உங்கள் கூறு அல்லது தர்க்கத்தின் பல்வேறு அம்சங்களை ஒரே நேரத்தில் உறுதிப்படுத்த மிகவும் பயனுள்ளதாக இருக்கும். WebdriverIO-இல் நீங்கள் எந்த தன்னிச்சையான பொருளின் ஸ்னாப்ஷாட்களை எடுக்கலாம், அதேபோல் WebElement DOM அமைப்பு அல்லது WebdriverIO கட்டளை முடிவுகளையும் எடுக்கலாம்.

மற்ற சோதனை கட்டமைப்புகளைப் போலவே, WebdriverIO கொடுக்கப்பட்ட மதிப்பின் ஸ்னாப்ஷாட்டை எடுத்து, அதை சோதனையுடன் சேர்ந்து சேமித்த குறிப்பு ஸ்னாப்ஷாட் கோப்புடன் ஒப்பிடும். இரண்டு ஸ்னாப்ஷாட்கள் பொருந்தவில்லை என்றால் சோதனை தோல்வியடையும்: ஒன்று மாற்றம் எதிர்பாராதது, அல்லது குறிப்பு ஸ்னாப்ஷாட் முடிவின் புதிய பதிப்பிற்கு புதுப்பிக்கப்பட வேண்டும்.

குறுக்கு தளம் ஆதரவு

இந்த ஸ்னாப்ஷாட் திறன்கள் Node.js சூழலில் முடிவிலிருந்து-முடிவு வரை சோதனைகளை இயக்குவதற்கும், உலாவியில் அல்லது மொபைல் சாதனங்களில் யூனிட் மற்றும் கூறு சோதனைகளை இயக்குவதற்கும் கிடைக்கின்றன.

ஸ்னாப்ஷாட்களைப் பயன்படுத்துதல்

ஒரு மதிப்பின் ஸ்னாப்ஷாட்டை எடுக்க, நீங்கள் expect() API இலிருந்து toMatchSnapshot() ஐப் பயன்படுத்தலாம்:

import { browser, expect } from '@wdio/globals'

it('can take a DOM snapshot', () => {
    await browser.url('https://guinea-pig.webdriver.io/')
    await expect($('.findme')).toMatchSnapshot()
})

இந்த சோதனை முதல் முறையாக இயக்கப்படும்போது, WebdriverIO இவ்வாறு தோற்றமளிக்கும் ஒரு ஸ்னாப்ஷாட் கோப்பை உருவாக்குகிறது:

// Snapshot v1

exports[`main suite 1 > can take a DOM snapshot 1`] = `"<h1 class="findme">Test CSS Attributes</h1>"`;

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

ஸ்னாப்ஷாட்டைப் புதுப்பிக்க, -s கொடியை (அல்லது --updateSnapshot) wdio கட்டளைக்கு அனுப்பவும், எ.கா.:

npx wdio run wdio.conf.js -s

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

இன்லைன் ஸ்னாப்ஷாட்கள்

இதேபோல், ஸ்னாப்ஷாட்டை சோதனை கோப்பிற்குள் இன்லைனாக சேமிக்க toMatchInlineSnapshot() ஐப் பயன்படுத்தலாம்.

import { expect, $ } from '@wdio/globals'

it('can take inline DOM snapshots', () => {
  const elem = $('.container')
  await expect(elem.getCSSProperty()).toMatchInlineSnapshot()
})

ஒரு ஸ்னாப்ஷாட் கோப்பை உருவாக்குவதற்குப் பதிலாக, Vitest ஸ்னாப்ஷாட்டை ஒரு சரமாக புதுப்பிக்க சோதனைக் கோப்பை நேரடியாக மாற்றியமைக்கும்:

import { expect, $ } from '@wdio/globals'

it('can take inline DOM snapshots', () => {
    const elem = $('.container')
    await expect(elem.getCSSProperty()).toMatchInlineSnapshot(`
        {
            "parsed": {
                "alpha": 0,
                "hex": "#000000",
                "rgba": "rgba(0,0,0,0)",
                "type": "color",
            },
            "property": "background-color",
            "value": "rgba(0,0,0,0)",
        }
    `)
})

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

விஷுவல் ஸ்னாப்ஷாட்கள்

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

விஷுவல் ஸ்னாப்ஷாட்களை இயக்க, உங்கள் அமைப்பில் @wdio/visual-service ஐச் சேர்க்கவும். விஷுவல் சோதனைக்கான ஆவணம் இல் அமைவு வழிமுறைகளைப் பின்பற்றலாம்.

பின்னர் நீங்கள் toMatchElementSnapshot() மூலம் விஷுவல் ஸ்னாப்ஷாட்டை எடுக்கலாம், எ.கா.:

import { expect, $ } from '@wdio/globals'

it('can take inline DOM snapshots', () => {
  const elem = $('.container')
  await expect(elem.getCSSProperty()).toMatchInlineSnapshot()
})

பின்னர் அடிப்படை கோப்பகத்தில் ஒரு படம் சேமிக்கப்படுகிறது. மேலும் தகவலுக்கு விஷுவல் சோதனை ஐப் பார்க்கவும்.