முக்கிய உள்ளடக்கத்திற்குச் செல்லவும்

இடைமறித்தல் சேவை

wdio-intercept-service என்பது ஒரு மூன்றாம் தரப்பு தொகுப்பு, மேலும் தகவலுக்கு GitHub | npm ஐப் பார்க்கவும்

🕸 webdriver.io இல் HTTP ajax அழைப்புகளைப் பிடித்து உறுதிப்படுத்தவும்

Tests Join the chat on Discord

இது webdriver.io க்கான ஒரு செருகுநிரல். நீங்கள் இன்னும் அதைப் பற்றி அறியவில்லை என்றால், அதைப் பாருங்கள், அது மிகவும் சிறப்பானது.

செலீனியம் மற்றும் webdriver முதன்மையாக e2e மற்றும் UI சோதனைக்கு பயன்படுத்தப்பட்டாலும், உங்கள் கிளையன்ட் கோடால் செய்யப்படும் HTTP கோரிக்கைகளை மதிப்பிட விரும்பலாம் (எ.கா. அளவீடுகள் அல்லது கண்காணிப்பு அழைப்புகளில் உடனடி UI கருத்துக்களைப் பெறாதபோது). wdio-intercept-service மூலம் ஒரு பயனர் செயலால் (எ.கா. பொத்தான் அழுத்தம் போன்றவை) துவக்கப்பட்ட ajax HTTP அழைப்புகளை இடைமறித்து, கோரிக்கை மற்றும் அதற்கான பதில்களைப் பற்றிய உறுதிப்பாடுகளைப் பின்னர் செய்ய முடியும்.

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

முன்நிபந்தனைகள்​

  • webdriver.io v5.x அல்லது அதற்கு பிறகு.

கவனம்! நீங்கள் இன்னும் webdriver.io v4 ஐப் பயன்படுத்துகிறீர்கள் என்றால், இந்த செருகுநிரலின் v2.x கிளையைப் பயன்படுத்தவும்!

நிறுவல்​

npm install wdio-intercept-service -D

பயன்பாடு​

WebDriver CLI உடன் பயன்பாடு​

உங்கள் wdio.conf.js இல் wdio-intercept-service சேர்ப்பது எளிதாக இருக்க வேண்டும்:

exports.config = {
  // ...
  services: ['intercept']
  // ...
};

நீங்கள் தயாராகிவிட்டீர்கள்.

WebDriver Standalone உடன் பயன்பாடு​

WebdriverIO Standalone ஐப் பயன்படுத்தும்போது, before மற்றும் beforeTest / beforeScenario செயல்பாடுகள் கைமுறையாக அழைக்கப்பட வேண்டும்.

import { remote } from 'webdriverio';
import WebdriverAjax from 'wdio-intercept-service'

const WDIO_OPTIONS = {
  port: 9515,
  path: '/',
  capabilities: {
    browserName: 'chrome'
  },
}

let browser;
const interceptServiceLauncher = WebdriverAjax();

beforeAll(async () => {
  browser = await remote(WDIO_OPTIONS)
  interceptServiceLauncher.before(null, null, browser)
})

beforeEach(async () => {
  interceptServiceLauncher.beforeTest()
})

afterAll(async () => {
  await client.deleteSession()
});

describe('', async () => {
  ... // See example usage
});

முன்னெடுத்த பிறகு, சில தொடர்புடைய செயல்பாடுகள் உங்கள் உலாவி கட்டளை சங்கிலிக்கு சேர்க்கப்படுகின்றன (API ஐப் பார்க்கவும்).

விரைவான தொடக்கம்​

பயன்பாட்டு எடுத்துக்காட்டு:

browser.url('http://foo.bar');
browser.setupInterceptor(); // capture ajax calls
browser.expectRequest('GET', '/api/foo', 200); // expect GET request to /api/foo with 200 statusCode
browser.expectRequest('POST', '/api/foo', 400); // expect POST request to /api/foo with 400 statusCode
browser.expectRequest('GET', /\/api\/foo/, 200); // can validate a URL with regex, too
browser.click('#button'); // button that initiates ajax request
browser.pause(1000); // maybe wait a bit until request is finished
browser.assertRequests(); // validate the requests

கோரிக்கைகளைப் பற்றிய விவரங்களைப் பெறுங்கள்:

browser.url('http://foo.bar')
browser.setupInterceptor();
browser.click('#button')
browser.pause(1000);

var request = browser.getRequest(0);
assert.equal(request.method, 'GET');
assert.equal(request.response.headers['content-length'], '42');

ஆதரிக்கப்படும் உலாவிகள்​

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

API​

முழு தொடரியலுக்கு TypeScript அறிவிப்பு கோப்பைப் பார்க்கவும், WebdriverIO உலாவி பொருளுக்கு சேர்க்கப்பட்ட தனிப்பயன் கட்டளைகளுக்கு. பொதுவாக, "விருப்பங்கள்" பொருளை அளவுருவாக எடுக்கும் எந்தவொரு முறையையும் இயல்புநிலை நடத்தையைப் பெற அந்த அளவுருவில்லாமல் அழைக்கலாம். இந்த "விருப்ப விருப்பங்கள்" பொருள்கள் ?: = {} மூலம் பின்தொடரப்படுகின்றன மற்றும் ஊகிக்கப்படும் இயல்புநிலை மதிப்புகள் ஒவ்வொரு முறைக்கும் விவரிக்கப்பட்டுள்ளன.

விருப்ப விளக்கங்கள்​

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

  • orderBy ('START' | 'END'): இந்த விருப்பம் உங்கள் சோதனைக்குத் திருப்பித் தரப்படும்போது, இடைமறிப்பாளரால் பிடிக்கப்பட்ட கோரிக்கைகளின் வரிசையைக் கட்டுப்படுத்துகிறது. இந்த நூலகத்தின் தற்போதைய பதிப்புகளுடன் பின்னோக்கி இணக்கத்திற்காக, இயல்புநிலை வரிசை 'END', இது கோரிக்கை முடிக்கப்பட்ட நேரத்திற்கு ஒத்ததாக உள்ளது. orderBy விருப்பத்தை 'START' என அமைத்தால், கோரிக்கைகள் தொடங்கப்பட்ட நேரத்தின்படி வரிசைப்படுத்தப்படும்.
  • includePending (boolean): இந்த விருப்பம் இன்னும் முடிக்கப்படாத கோரிக்கைகள் திருப்பித் தரப்படுமா என்பதைக் கட்டுப்படுத்துகிறது. இந்த நூலகத்தின் தற்போதைய பதிப்புகளுடன் பின்னோக்கி இணக்கத்திற்காக, இயல்புநிலை மதிப்பு false, மேலும் முடிக்கப்பட்ட கோரிக்கைகள் மட்டுமே திருப்பித் தரப்படும்.

browser.setupInterceptor()​

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

browser.disableInterceptor()​

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

browser.excludeUrls(urlRegexes: (string | RegExp)[])​

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

browser.expectRequest(method: string, url: string, statusCode: number)​

சோதனையின் போது துவக்கப்படப் போகும் ajax கோரிக்கைகளைப் பற்றிய எதிர்பார்ப்புகளை உருவாக்கலாம். சங்கிலியாக்கப்படலாம் (மற்றும் செய்யப்பட வேண்டும்). எதிர்பார்ப்புகளின் வரிசை செய்யப்படும் கோரிக்கைகளின் வரிசைக்கு வரைபடம் செய்ய வேண்டும்.

  • method (String): எதிர்பார்க்கப்படும் http முறை. xhr.open() முதல் வாதமாக ஏற்றுக்கொள்ளும் எதுவாக இருக்கலாம்.
  • url (String|RegExp): கோரிக்கையில் அழைக்கப்படும் சரியான URL ஒரு சரமாக அல்லது பொருத்த RegExp ஆக
  • statusCode (Number): பதிலின் எதிர்பார்க்கப்படும் நிலைக் குறியீடு

browser.getExpectations()​

உதவி முறை. அந்த நேரம் வரை நீங்கள் வைத்திருக்கும் அனைத்து எதிர்பார்ப்புகளையும் திருப்பித் தருகிறது

browser.resetExpectations()​

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

browser.assertRequests({ orderBy?: 'START' | 'END' }?: = {})​

எதிர்பார்க்கப்படும் அனைத்து ajax கோரிக்கைகளும் முடிந்ததும் இந்த முறையை அழைக்கவும். இது எதிர்பார்ப்புகளை செய்யப்பட்ட உண்மையான கோரிக்கைகளுடன் ஒப்பிட்டு பின்வருவனவற்றை உறுதிபடுத்துகிறது:

  • செய்யப்பட்ட கோரிக்கைகளின் எண்ணிக்கை
  • கோரிக்கைகளின் வரிசை
  • செய்யப்பட்ட ஒவ்வொரு கோரிக்கைக்கும் முறை, URL மற்றும் statusCode பொருத்த வேண்டும்
  • v4.1.10 மற்றும் அதற்கு முந்தைய நடத்தையுடன் இணக்கமாக இருக்க, விருப்பப் பொருள் இயல்பாக { orderBy: 'END' } என அமைக்கப்படுகிறது, அதாவது கோரிக்கைகள் எப்போது முடிக்கப்பட்டன. orderBy விருப்பம் 'START' என அமைக்கப்படும்போது, கோரிக்கைகள் பக்கத்தால் எப்போது துவக்கப்பட்டன என்ற அடிப்படையில் வரிசைப்படுத்தப்படும்.

browser.assertExpectedRequestsOnly({ inOrder?: boolean, orderBy?: 'START' | 'END' }?: = {})​

browser.assertRequests போன்றது, ஆனால் உங்கள் expectRequest கட்டளைகளில் நீங்கள் குறிப்பிடும் கோரிக்கைகளை மட்டுமே சரிபார்க்கிறது, அதைச் சுற்றி நடக்கக்கூடிய அனைத்து நெட்வொர்க் கோரிக்கைகளையும் வரைபடம் செய்யாமல். inOrder விருப்பம் true (இயல்புநிலை) எனில், கோரிக்கைகள் expectRequest உடன் அமைக்கப்பட்ட அதே வரிசையில் காணப்படும் என எதிர்பார்க்கப்படுகிறது.

browser.getRequest(index: number, { includePending?: boolean, orderBy?: 'START' | 'END' }?: = {})​

ஒரு குறிப்பிட்ட கோரிக்கையைப் பற்றி மேலும் நுட்பமான உறுதிப்பாடுகளைச் செய்ய, ஒரு குறிப்பிட்ட கோரிக்கைக்கான விவரங்களைப் பெறலாம். நீங்கள் அணுக விரும்பும் கோரிக்கையின் 0-அடிப்படையிலான குறியீட்டை வழங்க வேண்டும், கோரிக்கைகள் முடிக்கப்பட்ட வரிசையில் (இயல்புநிலை), அல்லது துவக்கப்பட்ட வரிசையில் (orderBy: 'START' விருப்பத்தைக் கடந்து).

  • index (number): நீங்கள் அணுக விரும்பும் கோரிக்கையின் எண்
  • options (object): கட்டமைப்பு விருப்பங்கள்
  • options.includePending (boolean): இன்னும் முடிக்கப்படாத கோரிக்கைகள் திருப்பித் தரப்பட வேண்டுமா. இயல்பாக, v4.1.10 மற்றும் அதற்கு முந்தைய நூலகத்தின் நடத்தையுடன் பொருந்த, இது தவறானது.
  • options.orderBy ('START' | 'END'): கோரிக்கைகள் எவ்வாறு வரிசைப்படுத்தப்பட வேண்டும். v4.1.10 மற்றும் அதற்கு முந்தைய நூலகத்தின் நடத்தையுடன் பொருந்த, இயல்பாக இது 'END'. 'START' எனில், கோரிக்கைகள் கோரிக்கை நிறைவுறும் நேரத்திற்குப் பதிலாக துவக்க நேரத்தால் வரிசைப்படுத்தப்படும். (நிலுவையில் உள்ள ஒரு கோரிக்கை இன்னும் முடிக்கப்படவில்லை என்பதால், 'END' ஆல் வரிசைப்படுத்தும்போது எல்லா நிலுவையில் உள்ள கோரிக்கைகளும் அனைத்து முடிக்கப்பட்ட கோரிக்கைகளுக்குப் பிறகு வரும்.)

திருப்புகிறது request பொருள்:

  • request.url: கோரப்பட்ட URL
  • request.method: பயன்படுத்தப்பட்ட HTTP முறை
  • request.body: கோரிக்கையில் பயன்படுத்தப்பட்ட பேலோடு/உடல் தரவு
  • request.headers: கோரிக்கை http தலைப்புகள் JS பொருளாக
  • request.pending: இந்த கோரிக்கை முழுமையானதா (அதாவது response பண்பு உள்ளதா) அல்லது செயலில் உள்ளதா என்பதற்கான பூலியன் கொடி.
  • request.response: கோரிக்கை முடிக்கப்பட்டால் மட்டுமே (அதாவது request.pending === false) இருக்கும் ஒரு JS பொருள், பதிலைப் பற்றிய தரவைக் கொண்டுள்ளது.
  • request.response?.headers: பதில் http தலைப்புகள் JS பொருளாக
  • request.response?.body: பதில் உடல் (முடிந்தால் JSON ஆக பாகுபடுத்தப்படும்)
  • request.response?.statusCode: பதில் நிலை குறியீடு

request.body பற்றிய ஒரு குறிப்பு: wdio-intercept-service கோரிக்கை உடலைப் பின்வருமாறு பாகுபடுத்த முயற்சிக்கும்:

  • string: சரத்தை மட்டும் திரும்பத் தரவும் ('value')
  • JSON: JSON.parse() ஐப் பயன்படுத்தி JSON பொருளைப் பாகுபடுத்தவும் (({ key: value }))
  • FormData: FormData ஐ { key: [value1, value2, ...] } வடிவத்தில் வெளியிடும்
  • ArrayBuffer: பஃபரை ஒரு சரமாக மாற்ற முயற்சிக்கும் (பரிசோதனை)
  • வேறு எதுவும்: உங்கள் தரவில் கடுமையான JSON.stringify() ஐப் பயன்படுத்தும். நல்ல அதிர்ஷ்டம்!

fetch API க்கு, நாங்கள் string மற்றும் JSON தரவை மட்டுமே ஆதரிக்கிறோம்!

browser.getRequests({ includePending?: boolean, orderBy?: 'START' | 'END' }?: = {})​

getRequest போன்ற விருப்ப விருப்பங்களை ஆதரிக்கும் ஒரு வரிசையாக எல்லா பிடிக்கப்பட்ட கோரிக்கைகளைப் பெறுங்கள்.

திருப்புகிறது request பொருள்களின் வரிசை.

browser.hasPendingRequests()​

HTTP கோரிக்கைகள் இன்னும் நிலுவையில் உள்ளதா என்பதைச் சரிபார்க்கும் ஒரு பயன்பாட்டு முறை. எல்லா கோரிக்கைகளும் நியாயமான நேரத்திற்குள் முடிந்துவிட்டதா என்பதை உறுதிசெய்ய சோதனைகளால் பயன்படுத்தப்படலாம், அல்லது getRequests() அல்லது assertRequests() அழைப்பு விரும்பிய அனைத்து HTTP கோரிக்கைகளையும் உள்ளடக்கும் என்பதை சரிபார்க்கலாம்.

திருப்புகிறது பூலியன்

TypeScript ஆதரவு​

இந்த செருகுநிரல் அதன் சொந்த TS வகைகளை வழங்குகிறது. இங்கே குறிப்பிடப்பட்டுள்ளபடி உங்கள் tsconfig ஐ வகை நீட்டிப்புகளுக்கு சுட்டிக்காட்டவும்:

"compilerOptions": {
    // ..
    "types": ["node", "webdriverio", "wdio-intercept-service"]
},

சோதனைகளை இயக்குதல்​

சோதனைகளை உள்ளூரில் இயக்க சமீபத்திய Chrome மற்றும் Firefox பதிப்புகள் தேவை. உங்கள் கணினியில் நிறுவப்பட்ட பதிப்புடன் பொருந்தும் வகையில் chromedriver மற்றும் geckodriver சார்புகளைப் புதுப்பிக்க வேண்டியிருக்கலாம்.

npm test

பங்களிப்பு​

ஒவ்வொரு பங்களிப்புக்கும் நான் மகிழ்ச்சியடைகிறேன். ஒரு சிக்கலைத் திறக்கவும் அல்லது நேரடியாக ஒரு PR ஐக் கோப்பிடவும்.
இந்த இடைமறிப்பாளர் நூலகம் இன்டர்நெட் எக்ஸ்ப்ளோரர் போன்ற பழைய உலாவிகளுடன் வேலை செய்யும் வகையில் எழுதப்பட்டுள்ளது என்பதை நினைவில் கொள்ளவும். எனவே, lib/interceptor.js இல் பயன்படுத்தப்படும் எந்த குறியீடும் குறைந்தபட்சம் இன்டர்நெட் எக்ஸ்ப்ளோரரின் JavaScript இயக்க நேரத்தால் பகுப்பாய்வு செய்யப்படக்கூடியதாக இருக்க வேண்டும்.

உரிமம்​

MIT

Welcome! How can I help?

WebdriverIO AI Copilot