HARmageddon is geannuleer: hoe ons Playwright geleer het om HAR met dinamiese parameters te herspel

Reguliere HAR-spoeke stop vinnig werk - dinamiese parameters breek versoekstemming, en die inhoud bevat sensitiewe data wat nie verbind kan word nie. Problem: Ons het outomatiese HAR-normalisering (vervanging van gebruikers, tokens, ID's) en 'n logiese laag op die top van Playwright ingevoer wat korrek met dinamiese parameters hanteer. Approach: Ons het Playwright geleer om die korrekte HAR-invoer te vind, selfs wanneer query/body-waardes verander en die hergebruik van entiteite met dinamiese identifiseerders voorkom. What we did: E2E toetse het onafhanklik van die omgewing geword, stabiel in CI / CD, het nie die backend nodig nie en bevat nie persoonlike data nie. Result: Why mock the network in E2E tests at all? Hoekom grap die netwerk in E2E toetse in elk geval? Alhoewel E2E-toetse bedoel is om die aansoek "as 'n geheel" te toets, moet jy in die praktyk byna altyd die UI van werklike netwerkoproepe isoleer. 1. Test stability Die ware vuur kan: Word ontoeganklik Wees stadig Onvoorspelbare data terug Mops elimineer ewekansigheid en maak toetse herhaalbaar. 2. Speed Selfs met opeenvolgende toetsloop, word mock antwoorde teruggegee • Geen werklike netwerkoproepe nie. instantly Dit maak toetse 'n paar keer vinniger in vergelyking met die slaan van die werklike backend. 3. Reducing load on the backend Wanneer E2E-toetse parallel uitgevoer word, genereer hulle 'n baie parallelle versoekings. maak loadspikes op die toetserver, veroorsaak die tariefgrensfout, Basies “DDoS” jou eie backend. Mocks verwyder die netwerkbelasting heeltemal - die backend neem nie deel aan die toetsloop nie. 4. Independence from external services Stripe, S3, geocoders, OpenAI - alles wat kan misluk, sal uiteindelik misluk. Mocks verander E2E-toetse in 'n ten volle outonome laag wat nie afhanklik is van derde-party-API's nie. Maar daar is 'n nadeel: as 'n eksterne diens sy kontrak verander of val, sal 'n bespotte toets nooit weet en gelukkig groen bly nie. How Playwright mocks the network Hoe Playwright die netwerk bespot Playwright het 'n lae-vlak interface vir die ontkenning en vervanging van versoekings: browserContext('**/api/users', route => { route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(mockUsers), }); }); Enige versoek wat ooreenstem met die patroon (in hierdie voorbeeld, eindig met /api/gebruikers) sal plaaslik behandel word - sonder om na die internet te gaan, en die data wat oorgedra word om te vervul, sal "na die kliënt" teruggestuur word as die antwoord op hierdie versoek. What is a HAR file and why is it convenient for testing? Wat is 'n HAR-lêer en waarom is dit gerieflik vir toetsing? is 'n JSON lêer wat bevat: HAR (HTTP Archive) Alle bladsye vrae Parameters vra Reaksies van die server Met ander woorde, HAR is 'n opname van real network activity. As jy 'n HAR een keer skep (byvoorbeeld, log in, oop 'n lys, laai 'n produkkaart), kan jy dan hierdie lêer gebruik as 'n bron van spotters wat die werklike API-gedrag heeltemal reproduceer. Dit is hoekom HAR perfek is wanneer jy: moet die netwerkstaat regmaak wil die UI toets sonder om die backend te begin 'n deterministiese scenario wat so naby as moontlik aan die werklikheid is How Playwright uses HAR files for mocking Hoe Playwright gebruik HAR-lêers vir spotprent Die playwright kan: Rekords het Replay HAR sonder werklike netwerk oproepe Beide operasies word gedoen deur die routeFromHAR metode op browserContext: browserContext.routeFromHAR(harFilePath, options); 1) Recording HAR browserContext.routeFromHAR(harFilePath, {update: true, url: /api\./}); Playwright vang outomaties alles wat in die leser gebeur (tenzij uitsluitings in opsies gekonfigureer word) en red dit in *.har lêer(s) 2) Replaying HAR browserContext.routeFromHAR(harFilePath, {update: false, url: /api\./}); Nou, as 'n toets 'n versoek maak wat in die HAR bestaan, gee Playwright onmiddellik die opgeslagen antwoord terug sonder om na die netwerk te gaan. Jy kan meer lees oor die opname en herspel HAR in die Playwright dokumente. Jy kan meer lees oor die opname en herspel van HAR in die Playwright . Dokters Dokters Advantages of HAR mocking Voordele van har joking Realistiese data HAR bevat werklike bediener antwoorde, en die UI sien hulle presies soos hulle was op die oomblik van opname. Volledige isolasie Geen bediener benodig nie. Teste loop selfs op 'n plaaslike masjien sonder 'n backend. 3 Hoë spoed HAR antwoorde word onmiddellik teruggekeer - toetse loop met maksimum spoed. Ideaal vir komplekse vloei Byvoorbeeld: Authentifikasie Kompleks filters Ketting vrae bladsye met dosyne van API oproepe Die genereer van sulke muil met die hand is moeilik, en HAR los dit outomaties op. Why HAR mocks can unexpectedly break Hoekom HAR moskies onverwagtig kan breek 'N Geregistreerde HAR-lêer is 'n snapshot van netwerkverzoeke wat gemaak word terwyl die werklike backend tydens die toets uitgevoer word.As gevolg hiervan kan die lêer dinamiese data, gebruikers-ID's in URL's en sensitiewe inligting (auth tokens, e-pos, ens.) bevat. In ons projek het ons 4 probleme met data in HAR-lêers gekry: 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.Gegee aan die gebruiker onder wie die HAR geregistreer is In die praktyk het ontwikkelaars HAR-lêers opgespoor terwyl hulle aangemeld is as verskillende gebruikers, wat gelei het tot URL's met gebruikers-ID's wat dadelik 'n probleem word. Example: In ons app kan 'n gebruiker chat gebruik en ook 'n lys ontvang e-posse op 'n aparte bladsy sien. Teste vir die chat bladsy gebruik mocks van wat 'n gebruikerslysverzoek vir 'n gebruiker met ID bevat : chats.har, unique-user-id-1 GET /unique-user-id-1/gebruikers/ lys GET /unique-user-id-1/gebruikers/ lys { "entries": [ { "request": { "method": "GET", "url": "/unique-user-id-1/users/list" } } ] } Teste vir die e-pos bladsy gebruik muck van , wat ook 'n gebruiker lys versoek bevat, maar dit is opgespoor onder 'n gebruiker met ID emails.har unique-user-id-2: GET /unique-user-id-2/gebruikers/ lys GET /unique-user-id-2/gebruikers/ lys { "entries": [ { "request": { "method": "GET", "url": "/unique-user-id-2/users/list" } } ] } Die gevolge: Playwright, wanneer herspel, ooreenstem vrae streng deur URL, metode en liggaam, sodat selfs 'n klein mismatch die spot breek. As ons al die toetse uitvoer wat aangemeld is as die gebruiker met ID , Playwright sal nie in staat wees om die benodigde entiteit in wanneer die e-pos bladsy toets uitgevoer word, omdat die eindpunt GET Geskryf vir die gebruiker Terwyl Playwright soek na 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 Dynamiese dele van URL's Example: Die HAR-lêer kan 'n invoer met 'n versoek-id wat aan die kliëntkant gegenereer word, bevat: { "entries": [ { "request": { "method": "GET", "url": "/generate?request-id=fc21b48a-e84d-4b-92-a494d65a280a" } } ] } Consequences: sal elke keer uniek wees (een waarde op die opname tyd, 'n ander op herspel tyd), so Playwright sal nooit vind hierdie inskrywing op daaropvolgende toets loop, weer omdat Playwright streng vergelyk URL data wanneer soek. request-id 3. Dynamic request body Dynamiese parameters kan nie net in die URL verskyn nie, maar ook in die versoekstof.As die versoekstof waardes bevat wat moet ooreenstem met data wat by 'n vorige stap verkry is (byvoorbeeld, versoek-id van /genereer), kan Playwright slegs die korrekte HAR-invoer vind as hierdie waardes presies ooreenstem. Alhoewel sulke parameters uniek van aard is, moet hulle waarde dieselfde wees oor al die verwante versoekings in die toets. As die versoek-id wat na /genereer is, nie ooreenstem met request_id in die daaropvolgende versoekstof nie, sal Playwright nie 'n ooreenstemmende ingang kan vind nie, en die bedrog sal net nie werk nie. wanneer die voorheen gegenereerde verzoek-id in die liggaam van 'n volgende versoek oorgedra word: Example { "entries": [ { "request": { "method": "POST", "url": "/generate-result", "postData": { "text": "{\"request_id\":\"fc21b48a-e84d-4b-92-a494d65a280a\"}" } } } ] } Consequences: As jy anders as wat in die /genereer versoek was, sal Playwright nie die ooreenstemmende invoer in die HAR vind nie. 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: Reële gebruikersdata kan in die repository eindig, want HAR-lêers moet in die repo wees vir CI/CD-toetsloop. En hoop dat jou auth eindpunt nie sulke data in eenvoudige teks in die werklike lewe aanvaar nie. We ended up with these tasks: Ons het met hierdie take geëindig: HAR-lêers mag nie afhanklik wees van die gebruiker waaronder hulle geregistreer is nie en mag nie sensitiewe data bevat nie. Dit moet nie saak maak waar ons hulle opgeteken het nie - ons wil hulle gebruik sonder om afhanklik te wees van gebruikers en hul data. Die lêer mag nie werklike persoonlike gebruikersdata bevat nie - slegs beheerde toetswaardes. Ons moet ons toetse leer om met dinamiese data te werk Eindpunte met dinamiese data moet in HAR gevind word en slegs een keer in die toets gebruik word, net soos met werklike backendoproepe: 'n spesifieke versoek - 'n spesifieke reaksie. As toetslogika 'n eindpunt met data van 'n ander eindpunt moet oproep, moet die streng ooreenstemmende HAR-invoer gebruik word. How to approach the solution Hoe om die oplossing te benader HAR normalisering - 'n aparte script wat: 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 Dinamiese data ondervraging versoekings na URL's met dinamiese data word afgepakt, en die korrekte HAR-invoer word in die antwoord teruggegee. HAR normalization Die normalisering Aangesien ons nodig het om voorheen gegenereerde HAR's te normaliseer, kom die taak neer op die outomatiese opsporing van gebruiker-aankondigings (userId, e-pos, token) en die vervanging daarvan met beheerde toetswaarde. Ons verdeel die proses in twee groot stappe: Ontvang werklike gebruikersdata uit die auth-verzoek, want dit is die enigste plek waar ons die korrekte gebruikersdata betroubaar kan vind: Gebruikers E-pos Authenticatie Token gebruikersgevoelige data met testdata oral: Walk through all HAR entries and replace In alle URL's In die vraag / reaksie koppe In versoek / reaksie organe Hieronder is 'n vereenvoudigde weergawe van hoe sulke normalisering geïmplementeer kan word, reeds verdeel in logiese dele. Step 1. Extract user data from HAR Eerstens vind ons 'n suksesvolle auth versoek (/auth met 200 status) en trek die userId, e-pos en token uit. 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; } U kan die HAR-bestandstype in meer besonderhede hier sien: 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 Volgende, ons moet ontslae raak van die afhanklikheid van 'n spesifieke userId in URL's: 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 Koppe bevat dikwels tokens en ander dinge wat nie in die repository moet verskyn nie. 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 }; }); } Indien nodig, kan jy ook vervanging logika vir Autorisasie, X-User-Id, en ander aangepaste kopieë hier voeg. 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 Resultaat: sit dit alles saam in normalizeHarFile Nou dat ons al die helper funksies het, is die finale stap om deur al die inskrywings te gaan en normalisering op alle dele van die versoekings / antwoorde toe te pas. /** * 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 Dinamiese data ondervraging In ons stelsel is daar verskeie verwante eindpunte: een ontvang 'n verzoek-id in query parameters (genereer op die kliënt), en later moet dieselfde verzoek-id in die liggaam van 'n ander POST-verzoek verskyn. By die herspel van HAR, Playwright strikt ooreenstem deur url + metode + liggaam en het geen idee dat twee verskillende versoekings logies verbind word deur dieselfde versoek-id. Sequence of steps Ons verdeel die werk met dinamiese data in verskeie stappe Basic HAR wiring through routeFromHAR Playwright still replays everything it can strictly match. Add a wrapper that: HarMocks Hy is in die herinnering, kan soek na die korrekte inskrywing met behulp van dinamika (verwydering van query parames, soek in die liggaam, ens.) winkels reeds gebruik versoek-idwaarde om te voorkom dat dieselfde invoer hergebruik word Intercepteer problematiese URL's via 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 Elke keer as Playwright nie 'n HAR-opname uit die boks kan pas nie, ons: verwyder die versoek, vind die korrekte invoer handmatig, gebruik dit een keer via route.fulfill(), Mark die versoek-id as gebruik. Step 1. Basic HAR setup via routeFromHAR Stap 1. basiese HAR instelling via routeFromHAR Kom ons begin met 'n eenvoudige klas wat HAR kan laai en dit by Playwright koppel. 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, }); } } Op hierdie punt kan Playwright reeds HAR herspel, maar nog steeds "val oor" op dinamiese parameters. . HarMocks Step 2. State for working with dynamic parameters Stap 2: Status vir die werk met dinamiese parameters Ons het nodig om: winkel reeds gebruik verzoek-id waardes, Onthou die request-id-waardes wat in een versoek gevind word, sodat ons hulle in 'n ander versoek kan gebruik. 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 Stap 3: Hulpmetodes vir die soektog in 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 Stap 4: Om 'n versoek met 'n request-id in 'n versoek te ontken Die eerste eindpunt: comes in the query Playwright self sal nie die HAR-opname vind as gevolg van streng URL-vergelyking nie, so ons doen dit vir 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: Ons intercepteer die versoek deur die pattern **/with-dynamic-request-id/**. Ons verwyder die dinamiese versoek-id van die URL om die ooreenstemmende invoer in HAR te vind. Via customCheck verseker ons dat hierdie versoek-id nie voorheen gebruik is nie. Ons spaar die versoek-id in foundSearchParams en gebruikRequestIds. Ons gee die antwoord van HAR terug via route.fulfill() in plaas van die werklike backend te tref. Step 5. Intercepting a request where request-id is in the body Stap 5: Intercepteer 'n versoek waar die versoek-id is in die liggaam Die tweede eindpunt moet dieselfde versoek-id gebruik, maar hierdie keer binne die versoek-lêer as Vraag vir ID: // 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: Ons neem die voorheen gered verzoek-id van foundSearchParams. Ons soek na 'n HAR-opname waar hierdie versoek-id in die liggaam onder die request_id sleutel is. As dit gevind word, gee ons die invoer in die toets terug. Step 6. Static URL + dynamic request_id in the body Stap 6: Statiese URL + dinamiese request_id in die liggaam 'N bykomende geval: die URL verander nie, maar die versoekstof bevat 'n unieke , en ons wil elke sulke ingang net een keer gebruik. 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 || '{}', }); }) Om dit alles saam te sit Om die toetslogika op dieselfde manier te laat optree as met 'n werklike backend, moet ons: laat Playwright gebruik HAR waar streng ooreenstem werk, vir dinamiese eindpunte, verteenwoordig versoekings handmatig, normaliseer URL en liggaam, kies die korrekte inskrywing en maak seker dat elke versoek-id slegs een keer gebruik word. Die code hierbo implementeer presies hierdie laag op die . routeFromHAR What does Playwright think about this? Wat dink Playwright daaroor? Op die oomblik bly Playwright 'n eenvoudige HAR-speler sonder 'n normaliseringslaag: Streng ooreenkoms deur URL / metode / liggaam. Geen cross-omgewing/baseURL-bewus HAR ondersteuning nie. Playwright weet nie jou domein logika nie. Dit is hoekom afsonderlike oplossings verskyn in die ekosisteem bo Playwright - die Of oplossings soos of . Vooruitkoms vir vooruitgang Skepper-netwerk Cache Hacking van Playwright Network Recordings The Hidden Cost of Playwright’s API Mocking (And Our Custom Solution) Vooruitkoms vir vooruitgang Skepper-netwerk Cache Hacking van Playwright Network Recordings Die verborge koste van Playwright se API-mocking (en ons aangepaste oplossing) Conclusion Konklusie In plaas van 'n klomp fragile spyt, het ons uiteindelik met 'n verenigde stelsel waar: Dit word onder elke gebruiker geregistreer, Automatiese standaardiseer gebruik met heeltemal valse data, en werk korrek selfs met dinamiese parameters. Hierdie benadering is veral nuttig in groot projekte met baie API oproepe en parallelle ontwikkeling: E2E toetse bly vinnig, deterministies en onafhanklik van werklike gebruikers. Geskryf deur Sergey Levkovich, Senior Frontend Ontwikkelaar by Social Discovery Group. Geskryf deur Sergey Levkovich, Senior Frontend Ontwikkelaar by Social Discovery Group. Geskryf deur Senior Frontend Ontwikkelaar by . Sergei Levkovitsj Sosiale ontdekkingsgroep Sergei Levkovitsj Sergei Levkovitsj Sosiale ontdekkingsgroep Sosiale ontdekkingsgroep