HARmageddon dia voamarina: ahoana no nampianatra ny Playwright mba hamerina HAR amin'ny parameters dynamic

Ny fandikan-tenan'ny HAR matetika dia mifarana haingana - ny parameters dynamic dia mifarana amin'ny fifanarahana amin'ny fangatahana, ary ny votoatiny dia ahitana angon-drakitra miavaka izay tsy azonao atao. Problem: Nanolotra normalization HAR automatique (fanovana mpampiasa, tokens, IDs) sy ny lozika layer teo ambonin'ny Playwright izay mitantana tsara ny dynamic parameters. Approach: Nampianatra ny Playwright izahay mba hahita ny taratasy HAR marina na dia rehefa miova ny valin'ny fanontaniana / vatana aza ary mba hisorohana ny fampiasana indray ny olona miaraka amin'ny identifier dinamika. What we did: Ny fitsapana E2E dia lasa tsy miankina amin'ny tontolo iainana, mihazakazaka amin'ny CI / CD, tsy mila ny backend, ary tsy ahitana angon-drakitra manokana. Result: Why mock the network in E2E tests at all? Nahoana no mampihomehy ny tambajotra amin'ny fitsapana E2E? Na dia ny fanandramana E2E aza dia natao hanandrana ny fampiharana "amin'ny ankapobeny", amin'ny fomba fanao dia tsy maintsy manaisotra ny UI amin'ny antso amin'ny tambajotra tena izy. 1. Test stability Ny API marina dia afaka: Tsy azo jerena Ny faharetan'ny Hiverina amin'ny angon-drakitra tsy azo antoka Ny fanafody dia manakana ny fahafaham-po ary mahatonga ny fanandramana ho azo aseho. 2. Speed Na dia amin'ny dingana fitsapana manaraka aza, ny valin'ny mock dia miverina Tsy misy antso amin'ny tambajotra tena izy ireo. instantly Izany dia mahatonga ny fitsapana amin'ny fotoana maro haingana kokoa raha oharina amin'ny fanafihana ny tena backend. 3. Reducing load on the backend Rehefa mihazakazaka amin'ny E2E ny fitsapana, dia miteraka fangatahana maro miaraka amin'izany. mamorona loading spikes eo amin'ny serivisy fitsapana, Mitondra amin'ny fahadisoana amin'ny fihenjanana ny tahan'ny, Amin'ny ankapobeny dia “DDoS” ny backend anao. Mocks manala tanteraka ny tambajotra - ny backend dia tsy mandray anjara amin'ny dingana fitsapana. 4. Independence from external services Stripe, S3, geocoders, OpenAI - na inona na inona izay mety ho diso dia ho diso amin'ny farany. Ny Mocks dia manova ny fanandramana E2E amin'ny sehatry ny fahazoan-dalana tanteraka izay tsy miankina amin'ny API avy amin'ny antoko fahatelo. Saingy misy ny tsy fahampiana: raha manova ny fifanarahana na manala ny serivisy ivelany, dia tsy ho fantatry ny mpitsikilo ny fanadinana ary ho faly. How Playwright mocks the network Ahoana ny Playwright mampihomehy ny tambajotra Playwright dia manana interface ambany ambaratonga ho an'ny fanadihadiana sy ny fanovana fangatahana: browserContext('**/api/users', route => { route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(mockUsers), }); }); Ny fangatahana rehetra mifanaraka amin'ny endrika (ao amin'ity ohatra ity, mifarana amin'ny /api / mpampiasa) dia handaminana any an-toerana - tsy handeha amin'ny aterineto, ary ny angon-drakitra nalefa hanatanterahana dia hiverina "ho an'ny mpanjifa" ho valiny amin'ity fangatahana ity. What is a HAR file and why is it convenient for testing? Inona no angon-drakitra HAR ary nahoana no mety ho an'ny fitsapana? Ny rakitra JSON dia ahitana: HAR (HTTP Archive) Fangatahana rehetra amin'ny pejy Ny fametrahana ny parameters Ny valin'ny server Amin'ny ankapobeny, ny fandaharana dia real network activity. Raha mamorona HAR indray mandeha ianao (ohatra, miditra, misokatra lisitra, mametraka karatra vokatra), dia azonao ampiasaina ity rakitra ity ho loharanom-baovao izay mamerina tanteraka ny fitondran'ny API tena izy. Izany no mahatonga ny HAR ho tsara rehefa: Ilaina ny mametraka ny rafitra Tiako ny manandrana ny UI tsy manomboka ny backend Mila fandaharana deterministika izay akaiky ny zava-misy araka izay azo atao. How Playwright uses HAR files for mocking Ahoana ny Playwright mampiasa HAR rakitra ho an'ny mocking Ny mpilalao dia afaka: Ny rakitra dia Replay HAR tsy misy antso amin'ny tambajotra tena izy Ireo asa roa ireo dia atao amin'ny alàlan'ny fomba routeFromHAR ao amin'ny browserContext: browserContext.routeFromHAR(harFilePath, options); 1) Recording HAR browserContext.routeFromHAR(harFilePath, {update: true, url: /api\./}); Playwright dia manala ny zava-drehetra mitranga ao amin'ny navigateur (afa-tsy voafaritra ao amin'ny safidy) ary mamonjy izany ao amin'ny *.har file(s) 2) Replaying HAR browserContext.routeFromHAR(harFilePath, {update: false, url: /api\./}); Amin'izao fotoana izao, raha ny fanandramana dia manolotra fangatahana izay misy ao amin'ny HAR, Playwright dia miverina avy hatrany ny valiny voatahiry raha tsy mandeha amin'ny tambajotra. Azonao atao ny mamaky bebe kokoa momba ny fandaharana sy ny famerenana indray ny HAR ao amin'ny dokam-barotra Playwright. Azonao atao ny mamaky bebe kokoa momba ny fandaharana sy ny famerenana HAR ao amin'ny Playwright . Ny dokotera Ny dokotera Advantages of HAR mocking Ny tombontsoa avy amin'ny HAR mocking Ny angon-drakitra azo antoka Ny HAR dia ahitana valin'ny mpizara tena izy, ary ny UI dia mahita azy ireo tahaka ny tamin'ny fotoana nahatongavan'ny fisoratana. Ny fametrahana tanteraka Tsy ilaina ny mpizara. Ny fanandramana dia mihazakazaka na dia amin'ny solosaina ao an-toerana aza tsy misy backend. Ny haavo dia avo lenta Ny valin'ny HAR dia miverina avy hatrany - ny fitsapana dia mihazakazaka amin'ny haingam-pandeha. Idealy ho an'ny fifamoivoizana sarotra Ohatra ny Ny fahamarinana Sarotra ny filalaovana Fangatahana ho an'ny Chains pejy miaraka amin'ny fangatahana API am-polony Ny famokarana toy izany amin'ny tanana dia sarotra, ary ny HAR dia mamaha izany amin'ny fitaovana. Why HAR mocks can unexpectedly break Nahoana ny harato dia mety ho tsy ampoizina Ny rakitra HAR voatahiry dia fanehoan-kevitra avy amin'ny fangatahana amin'ny tambajotra izay natao rehefa nandray ny tena backend nandritra ny fanadinana. Noho izany, ny rakitra dia mety ahitana angon-drakitra dinamika, ny ID mpampiasa ao amin'ny URL, ary ny fampahalalana miavaka (auth tokens, mailaka, sns.). Ao amin'ny tetikasa izahay dia niatrika olana 4 tamin'ny angon-drakitra ao amin'ny rakitra HAR: tied to the user under which the HAR was recorded dynamic parts of URLs dynamic request bodies sensitive data that can’t be committed 1.Tied to the user under which the HAR was recorded 1.Nambara tamin'ny mpampiasa izay voasoratra ao amin'ny HAR Amin'ny ankapobeny, ny mpandraharaha dia nanoratra ireo rakitra HAR rehefa tafiditra toy ny mpampiasa samihafa, izay nitarika ny URL miaraka amin'ny ID mpampiasa mba ho olana avy hatrany. Example: Ao amin'ny fampiharana, ny mpampiasa dia afaka mampiasa ny chat ary koa jereo ny lisitry ny mailaka efa nandray ao amin'ny pejy manokana. Ny fitsapana amin'ny pejy chat dia mampiasa mocks avy amin'ny izay ahitana fangatahana lisitra mpampiasa ho an'ny mpampiasa miaraka amin'ny ID : chats.har, unique-user-id-1 GET /unique-user-id-1 / mpampiasa / lisitra Raiso ny Ireo mpampiasa / lisitra unique-user-id-1 { "entries": [ { "request": { "method": "GET", "url": "/unique-user-id-1/users/list" } } ] } Tests ho an'ny e-mails pejy mampiasa mocks avy amin'ny , izay misy ihany koa ny fangatahana lisitry ny mpampiasa, fa voatahiry amin'ny mpampiasa miaraka amin'ny ID emails.har unique-user-id-2: GET /unique-user-id-2 / mpampiasa / lisitra Raiso ny Ireo mpampiasa / lisitra unique-user-id-2 { "entries": [ { "request": { "method": "GET", "url": "/unique-user-id-2/users/list" } } ] } Ny vokatry ny Playwright, rehefa milalao indray, mifanaraka amin'ny fangatahana amin'ny URL, ny fomba, ary ny vatana, ka na dia tsy mifanaraka kely aza dia manaisotra ny fandikan-teny. Raha mihazakazaka ny fitsapana rehetra izay tafiditra amin'ny mpampiasa miaraka amin'ny ID , Playwright dia tsy afaka mahita ny olona ilaina ao amin'ny Rehefa mihazakazaka ny fanandramana ny pejy mailaka, satria ny endpoint GET Voasoratra ho an'ny mpampiasa Raha toa ka mikaroka ny Playwright unique-user-id-1 emails.har /unique-user-id-2/users/list unique-user-id-2 /unique-user-id-1/users/list. 2. Dynamic parts of URLs Ny ampahany dinamika amin'ny URL Example: Ny rakitra HAR dia mety ahitana lahatsoratra miaraka amin'ny fangatahana-id niteraka amin'ny lafiny mpanjifa: { "entries": [ { "request": { "method": "GET", "url": "/generate?request-id=fc21b48a-e84d-4b-92-a494d65a280a" } } ] } Consequences: dia tsy mitovy isaky ny fotoana (manana isa amin'ny fotoana fitehirizana, iray hafa amin'ny fotoana replay), ka Playwright dia tsy hahita ity lahatsoratra ity amin'ny fanandramana manaraka, indray satria Playwright manara-maso ny angon-drakitra URL rehefa mitady. request-id 3. Dynamic request body Raha misy isa ao amin'ny vatana izay tsy maintsy mifanaraka amin'ny angon-drakitra azo avy amin'ny dingana teo aloha (ohatra, request-id avy amin'ny /generate), Playwright dia afaka mahita ny taratasy HAR marina fotsiny raha mifanaraka marina ireo lanjany ireo. Na dia tsy mitovy amin'ny request_id ao amin'ny vatana manaraka, Playwright dia tsy afaka mahita lahatsoratra mifanaraka, ary ny fanadihadiana dia tsy miasa. raha ny fangatahana-id efa niteraka teo aloha dia alefa ao amin'ny vatana amin'ny fangatahana manaraka: Example { "entries": [ { "request": { "method": "POST", "url": "/generate-result", "postData": { "text": "{\"request_id\":\"fc21b48a-e84d-4b-92-a494d65a280a\"}" } } } ] } Consequences: Raha Tsy mitovy amin'ny zavatra tao amin'ny / generate fangatahana, Playwright dia tsy hahita ny fifanarahana entana ao amin'ny HAR. request_id 4. Sensitive data that can’t be committed Example: { "entries": [ { "request": { "method": "POST", "url": "api/auth", "postData": { "mimeType": "application/json", "text": "{\"email\":\"test@test.com\",\"password\":\"strongPassword\"}" } } } ] } Consequences: Ny angon-drakitra tena mpampiasa dia mety ho tonga ao amin'ny fametrahana, satria ny rakitra HAR dia tsy maintsy ho ao amin'ny repo ho an'ny fandidiana CI / CD. Ary manantena fa ny auth endpoint dia tsy manaiky angon-drakitra toy izany amin'ny teny mazava amin'ny fiainana tena izy We ended up with these tasks: Nifarana tamin'ireo andraikitra ireo izahay: Ny rakitra HAR dia tsy tokony miankina amin'ny mpampiasa izay voasoratra ary tsy tokony ahitana angon-drakitra miavaka Tsy tokony ho zava-dehibe izay nosoratana azy ireo - te-hampiasa azy ireo isika tsy miankina amin'ny mpampiasa sy ny angon-drakitrao. Ny rakitra dia tsy tokony ahitana tahirin-kevitra tena manokana momba ny mpampiasa - afa-tsy ny valin'ny fitsapana mifehy. Mila mampianatra ny fitsapana isika mba hiasa amin'ny angona dinamika Ny endpoints miaraka amin'ny angon-drakitra dia tsy maintsy hita ao amin'ny HAR ary ampiasaina amin'ny fitsapana indray mandeha ihany, toy ny amin'ny antso tena an-tsoratra: fangatahana manokana - valiny manokana. Raha ilaina ny logic fitsapana mba hamantatra ny endpoint miaraka amin'ny angon-drakitra avy amin'ny endpoint hafa, dia tsy maintsy ampiasaina ny taratasy HAR mifanaraka amin'izany. How to approach the solution Ahoana ny fomba hifandray amin'ny vahaolana HAR normalization - script manokana izay: finds “original” user data in the HAR and replaces it with test values can normalize previously created HARs so we don’t have to re-record them. Some tests require special conditions for the user in order to reproduce them for recording Ny fametrahana angona dinamika Ny fangatahana amin'ny URL miaraka amin'ny angon-drakitra dinamika dia voasambotra ary ny entana HAR marina dia niverina ao amin'ny valiny. HAR normalization Ny normalization dia Satria ilaintsika ny manamaivana ny HARs efa nateraky aloha, ny andraikiny dia ny mamantatra ny fampahafantarana mpampiasa (userId, mailaka, token) ary hanolo azy ireo amin'ny vidin'ny fitsapana voafehy. Isika dia mizara ny dingana amin'ny dingana lehibe: Ampidiro ny angon-drakitra mpampiasa tena avy amin'ny fangatahana auth, satria io no toerana tokana ahafahantsika mahita ny angon-drakitra mpampiasa marina: Ny mpampiasa Ny mailaka Ny fanamarinana token Data mahatsiravina amin'ny mpampiasa miaraka amin'ny angon-drakitra fitsapana manerana izao tontolo izao: Walk through all HAR entries and replace Ao amin'ny URL rehetra Ao amin'ny fanontaniana / valin'ny valiny Ao amin'ny vatana fangatahana / valin-teny Ity ambany ity dia dikan-teny tsotra momba ny fomba ahafahana mampihatra normalization toy izany, efa voafaritra ho ampahany ara-potoana. Step 1. Extract user data from HAR Voalohany, dia mahita fangatahana auth mahomby ( / auth miaraka amin'ny toe-javatra 200) ary manaisotra userId, mailaka, ary token. interface IdentityData { userId: string email: string token: string } const testData: IdentityData = { userId: '123456789', email: 'test@test.com', token: '936598harmageddoniscancelled5351', }; function extractUserData(harContent: Har): IdentityData | null { const entries = harContent.log.entries; for (const entry of entries) { const url = entry.request?.url || ''; const status = entry.response.status; if (url.includes('/auth') && status === 200) { const responseBody = JSON.parse(entry.response.content.text); const token = entry.response.headers.find( h => h.name.toLowerCase() === 'token' )?.value; return { userId: responseBody.id, email: responseBody.email, token: token, }; } } return null; } Azonao jerena ny karazana rakitra HAR amin'ny antsipirihany bebe kokoa eto: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/har-format/index.d.ts https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/har-format/index.d.ts Step 2. Normalize URLs Aorian'izany, ilaintsika ny hanafoana ny fitoviana amin'ny userId manokana ao amin'ny URL: function normalizeUrl((url: string, identityData: IdentityData, testData: IdentityData): string { // Replace userId – our IDs are unique enough that the chance of // encountering them somewhere else is essentially zero return url.replaceAll(identityData.userId, testData.userId); } Step 3. Normalize headers Ny lohateny matetika dia ahitana token sy zavatra hafa izay tsy tokony hitranga ao amin'ny tahirin-kevitra. function normalizeHeaders(headers: Header[], identityData: IdentityData, testData: IdentityData): Header[] { return headers.map(header => { let value = header.value || ''; // Replace token in the `token` header if (header.name?.toLowerCase() === 'token' && value === identityData.token) { value = testData.token; } return { ...header, value }; }); } Raha ilaina, azonao atao ihany koa ny manampy ny lozika fanovàna ho an'ny Authorization, X-User-Id, ary ny lohateny hafa mifandraika eto. Step 4. Normalize request and response bodies function normalizeContent(text: string, identityData: IdentityData, testData: IdentityData): string { let normalized = text; for (const key of Object.keys(identityData) as (keyof IdentityData)[]) { const original = identityData[key]; const replacement = testData[key]; if (!original || !replacement) continue; normalized = normalized.replaceAll(original, replacement); } return normalized; } Result: putting it all together in normalizeHarFile Ny vokatr'izany dia ny fametrahana izany rehetra izany amin'ny normalizeHarFile. Ankehitriny fa manana ny asa fanampiana rehetra isika, ny dingana farany dia ny mandeha amin'ny entana rehetra ary mampihatra normalization amin'ny ampahany rehetra amin'ny fangatahana / valiny. /** * Normalizes a HAR file by replacing real user data with test data * @param {Har} harContent - HAR file content * @param {Object} testData - test data used for replacement (userId, email, token) */ function normalizeHarFile(harContent: Har, testData: IdentityData) { const entries = harContent.log.entries || []; // 1. Extract real user data from the auth request const identityData = extractUserData(harContent); // 2. Normalize each entry in the HAR file const normalizedEntries = entries.map(entry => { // Normalize request URL if (entry.request.url) { entry.request.url = normalizeUrl( entry.request.url, identityData, testData ); } // Normalize request headers if (entry.request.headers) { entry.request.headers = normalizeHeaders( entry.request.headers, identityData, testData ); } // Normalize response headers if (entry.response.headers) { entry.response.headers = normalizeHeaders( entry.response.headers, identityData, testData ); } // Normalize request body if (entry.request.postData?.text) { entry.request.postData.text = normalizeContent( entry.request.postData.text, identityData, testData ); } // Normalize response body if (entry.response.content.text) { entry.response.content.text = normalizeContent( entry.response.content.text, identityData, testData ); } return entry; }); // 3. Return normalized HAR content harContent.log.entries = normalizedEntries; return harContent; } Dynamic data interception Ny fametrahana angona dinamika Ao amin'ny rafitra, misy endpoints maro mifandraika: ny iray dia mahazo request-id ao amin'ny fanontaniana parameters (manorina amin'ny mpanjifa), ary avy eo dia tsy maintsy hita ihany koa ny request-id ao amin'ny vatana hafa POST fangatahana. Replaying HAR, Playwright mifanaraka amin'ny url + fomba + vatana ary tsy fantatra fa roa samihafa fangatahana mifandray amin'ny mitovy fangatahana-id. Sequence of steps Mizara ny asa amin'ny angon-drakitra dinamika amin'ny dingana maromaro izahay Basic HAR wiring through routeFromHAR Playwright still replays everything it can strictly match. Add a wrapper that: HarMocks Ny fahatsiarovana dia ao amin'ny fahatsiarovana Azonao atao ny mitady ny entana marina amin'ny famaritana ny dynamics (fanesorana ny params fanontaniana, fikarohana amin'ny vatana, sns.) ny fivarotana efa nampiasa request-idvalues mba hisorohana ny fampiasana indray ny entana mitovy Ampidiro ny URL misy olana amin'ny alalan'ny context.route: first request: comes in the query request-id (/with-dynamic-request-id) second request: the same is in the body request-id (/with-request-id-inside-body) additional case: static URL + dynamic only in the body ( ) request_id /api/**/with-dynamic-inside-post Isaky ny Playwright tsy afaka mifanaraka amin'ny taratasy HAR avy amin'ny boaty, isika: hanafoana ny fangatahana, mahita ny fidirana marina amin'ny alalan'ny manual, mampiasa izany indray mandeha amin'ny alalan'ny route.fulfill(), Tsindrio ny fangatahana-id toy ny ampiasaina. Step 1. Basic HAR setup via routeFromHAR dingana 1. Basic HAR fametrahana amin'ny alalan'ny routeFromHAR Aoka isika hanomboka amin'ny kilasy tsotra izay afaka mametraka HAR ary mampifandray azy amin'ny Playwright. async function setupHarMocks(context: BrowserContext, harFileName: string): Promise { const harFilePath = path.join(__dirname, '..', 'har-files', harFileName); if (!fs.existsSync(harFilePath)) { throw new Error(`HAR file not found: ${harFilePath}`); } const harMocks = new HarMocks(context, harFilePath); await harMocks.setupHarMocks(); } export class HarMocks { private context: BrowserContext private harFilePath: string private harContent: HarContent constructor(context: BrowserContext, harFilePath: string) { this.context = context; this.harFilePath = harFilePath; try { this.harContent = JSON.parse(fs.readFileSync(this.harFilePath, 'utf8')); } catch (error) { throw new Error(`Failed to load HAR file ${this.harFilePath}: ${error}`); } } async setupHarMocks(): Promise { await this.context.routeFromHAR(this.harFilePath, { // Use for API requests url: /api\./, // Use only existing entries update: false, }); } } Amin'izao fotoana izao, Playwright dia afaka mamerina HAR, fa mbola "mihena" amin'ny parameters dynamic. . HarMocks Step 2. State for working with dynamic parameters dingana 2 - Ny toe-javatra ahafahana miasa amin'ny parameter dynamic Mila ny : fivarotana efa nampiasa valin'ny request-id, Tsarovy ny valin'ny request-id hita ao amin'ny fangatahana iray mba hahafahantsika mampiasa azy ireo amin'ny hafa. export class HarMocks { private context: BrowserContext private harFilePath: string private harContent: HarContent // In one request the request-id is in query, in another - in body, // so we need to store the found value somewhere private foundSearchParams: Record = {} // Store used request-ids so we don’t reuse the same entry private usedRequestIds: Set = new Set() // ... } Step 3. Helper methods for searching entries in HAR Ny dingana fahatelo dia ny fomba hanampy amin'ny fikarohana entana ao amin'ny HAR 3.1. URL normalization (removing dynamic query params) normalize(url: string, removableSearchParams: string[] = []) { const urlObj = new URL(url); removableSearchParams.forEach((param) => { urlObj.searchParams.delete(param) }); return urlObj.toString(); } 3.2. Cache key for found params getKeyForSearchParams(name: string, param: string) { return `${name}_${param}`; } 3.3. Easy access to query params getSearchParams(url: string) { const urlObj = new URL(url); return urlObj.searchParams; } 3.4. Finding HAR entry by URL/method with normalization and an extra check findHarEntry({ requestUrl, method, removableSearchParams = [], customCheck }: { requestUrl: string method: string removableSearchParams?: string[] customCheck?: (entry: HarEntry) => boolean }) { return this.harContent.log.entries.find((entry: HarEntry) => { // Additional check, if provided if (entry.request.method !== method || (customCheck && !customCheck(entry))) { return false; } const normHarUrl = removableSearchParams.length > 0 ? this.normalize(entry.request.url, removableSearchParams) : entry.request.url; if (normHarUrl !== requestUrl) { return false; } return true; }) } 3.5. Finding HAR entry where a parameter is inside the body findHarEntryWithParamsInsideBody({ requestUrl, method, parentParamValue, ownParamName, }: { requestUrl: string method: string parentParamValue: string ownParamName: string }) { if (!parentParamValue) { return false; } return this.harContent.log.entries.find((entry: HarEntry) => { const postDataText = entry.request.postData?.text; if (!postDataText) { return false; } return entry.request.url === requestUrl && entry.request.method === method && postDataText.includes(ownParamName) && postDataText.includes(parentParamValue); }) } 3.6. Extracting request_id from request body extractRequestIdFromPostData(entry: HarEntry): string | null { try { const postDataText = entry.request.postData?.text; if (!postDataText) return null; const postData = JSON.parse(postDataText); return postData.request_id || null; } catch { return null; } } Step 4. Intercepting a request with request-id in query Ny dingana 4 dia ny fametrahana ny fangatahana amin'ny request-id ao amin'ny fanontaniana Ny dingana voalohany: Tonga ao amin'ny fangatahana Playwright ny tenany dia tsy hahita ny HAR entana noho ny manara-maso ny URL, noho izany dia manao izany ho an'ny Playwright. request-id (/with-dynamic-request-id/**) async setupHarMocks(): Promise { await this.context.routeFromHAR(this.harFilePath, { url: /api\./, update: false, }); // URL where request-id is passed in query await this.context.route('**/with-dynamic-request-id/**', async (route) => { const url = route.request().url(); // Remove dynamic request-id from URL const normalizedUrl = this.normalize(url, ['request-id']); const entry = this.findHarEntry({ requestUrl: normalizedUrl, method: 'POST', removableSearchParams: ['request-id'], customCheck: (entry) => { // Ensure request-id from searchParams hasn’t been used yet const searchParams = this.getSearchParams(entry.request.url) const requestId = searchParams.get('request-id') return !requestId || !this.usedRequestIds.has(requestId) }, }); if (!entry) { console.error('Entry not found for:', url); await route.continue(); return; } const searchParams = this.getSearchParams(entry.request.url); const requestId = searchParams.get('request-id'); if (requestId) { // Save request-id for subsequent requests this.foundSearchParams[ this.getKeyForSearchParams('dynamic', 'request-id') ] = requestId; // Mark request-id as used this.usedRequestIds.add(requestId); } await route.fulfill({ status: entry.response.status, headers: entry.response.headers, body: entry.response.content?.text || '{}', }); }) // ...other route handlers } What’s happening here: Ny fangatahana dia alefa amin'ny endrika **/with-dynamic-request-id/**. Azontsika esorina ny dinamika request-id avy amin'ny URL mba hahita ny fifanarahana entana ao amin'ny HAR. Amin'ny alalan'ny customCheck dia manome antoka isika fa tsy mbola nampiasaina ity fangatahana-id ity. Ny fangatahana-id dia voatahiry ao amin'ny foundSearchParams sy ny usedRequestIds. Miverena ny valiny avy amin'ny HAR amin'ny alàlan'ny route.fulfill() fa tsy ny tena backend. Step 5. Intercepting a request where request-id is in the body dingana 5 - Mifandray amin'ny fangatahana izay misy ny request-id ao amin'ny vatana Ny endpoint faharoa dia tokony hampiasa ny mitovy fangatahana-id, fa amin'ity indray mitoraka ity ao anatin'ny vatana fangatahana toy ny Ny fangatahana dia: // URL that sends request-id from previous step in the body of a POST request await this.context.route('**/with-request-id-inside-body', async (route) => { const url = route.request().url(); const entry = this.findHarEntryWithParamsInsideBody({ requestUrl: url, method: 'POST', parentParamValue: this.foundSearchParams[ this.getKeyForSearchParams('dynamic', 'request-id') ], ownParamName: 'request_id', }); if (!entry) { console.error('Entry not found for:', url); await route.continue(); return; } await route.fulfill({ status: entry.response.status, headers: entry.response.headers, body: entry.response.content?.text || '{}', }); }) Logic: Azontsika avy amin'ny foundSearchParams ny request-id voatahiry teo aloha. Mianatra amin'ny taratasy HAR izay misy ity request-id ity ao amin'ny vatana eo ambanin'ny solosaina request_id. Raha hita izany, dia miverina amin'ny fitsapana izany entana izany. Step 6. Static URL + dynamic request_id in the body dingana 6. static URL + dynamic request_id ao amin'ny vatana Ny tranga fanampiny: ny URL dia tsy miova, fa ny vatana fangatahana dia ahitana , ary tiantsika ny mampiasa tsirairay toy izany fidirana fotsiny indray mandeha. request_id await this.context.route('**/api/**/with-dynamic-inside-post', async (route) => { const url = route.request().url(); const entry = this.findHarEntry({ requestUrl: url, method: 'POST', customCheck: (entry) => { // Ensure request_id from the body hasn’t been used yet const requestId = this.extractRequestIdFromPostData(entry) return !requestId || !this.usedRequestIds.has(requestId) }, }); if (!entry) { console.error('Entry not found for:', url); await route.continue(); return; } const requestId = this.extractRequestIdFromPostData(entry); if (requestId) { this.usedRequestIds.add(requestId); } await route.fulfill({ status: entry.response.status, headers: entry.response.headers, body: entry.response.content?.text || '{}', }); }) Ny fametrahana izany rehetra izany Mba hahafahan'ny logic fitsapana mitovy amin'ny amin'ny tena backend, ilaintsika ny: Aoka ny Playwright hampiasa HAR na aiza na aiza amin'ny asa mifanaraka mafy, ho an'ny endpoints dinamika, manangona fangatahana amin'ny tanana, manamaivana ny URL sy ny vatana, misafidy ny fidirana marina ary miantoka fa ny fangatahana tsirairay dia ampiasaina indray mandeha. Ny fehezan-dalàna etsy ambony dia manatanteraka io layer io amin'ny ambony . routeFromHAR What does Playwright think about this? Inona no hevitry ny Playwright momba izany? Amin'izao fotoana izao, ny Playwright dia mbola mpilalao HAR tsotra tsy misy sehatra normalization: Mifanaraka amin'ny URL / fomba / vatana. Tsy misy fanohanana amin'ny sehatry ny tontolo iainana / baseURL-aware HAR. Ny Playwright dia tsy mahalala ny lohatenin'ny sehatra. Izany no mahatonga ny vahaolana samihafa hita ao amin'ny tontolo iainana eo an-tampon'ny Playwright - Ny Na ny vahaolana toy ny Ary . playwright-advanced-har Fandaharana amin'ny tambajotra Ny fametrahana ny Playwright Network Records Ny vidin'ny fanitsakitsahana ny API amin'ny Playwright (Ary ny vahaolana manokana) Ny mpandray anjara amin'ny Fandaharana amin'ny tambajotra Ny fametrahana ny Playwright Network Records Ny vidin'ny fanitsakitsahana ny API amin'ny Playwright (Ary ny vahaolana manokana) Conclusion Ny famaranana Amin'ny ankapobeny, amin'ny ankapobeny, isika dia nanapa-kevitra ny hanana rafitra iray izay: Ary dia voasoratra ao amin'ny mpampiasa rehetra, Normaina ho an'ny tsirairay, Amin'ny alàlan'ny fampiasana ny angon-drakitra tsy marina, ary miasa tsara na dia amin'ny parametra dinamika aza. Ity fomba ity dia tena ilaina amin'ny tetikasa lehibe miaraka amin'ny fangatahana API maro sy ny fampandrosoana mitovy amin'izany: ny fanandramana E2E dia haingana, deterministika ary tsy miankina amin'ny mpampiasa tena izy. Sary avy amin'i Sergey Levkovich, Senior Frontend Developer ao amin'ny Social Discovery Group. Sary avy amin'i Sergey Levkovich, Senior Frontend Developer ao amin'ny Social Discovery Group. Nosoratan'ny Mpiasa amin'ny Frontend Developer ao . Ny renivohiny dia Levkovich Ny vondrona Discovery sosialy Ny renivohiny dia Levkovich Ny renivohiny dia Levkovich Ny vondrona Discovery sosialy Ny vondrona Discovery sosialy