HARmageddon wird abgesagt: Wie wir Playwright beigebracht haben, HAR mit dynamischen Parametern zu spielen

Regelmäßige HAR-Spiele hören schnell auf zu funktionieren - dynamische Parameter unterbrechen die Anforderungsausgleich, und der Inhalt enthält sensible Daten, die nicht verpflichtet werden können. Problem: We introduced automatic HAR normalization (replacing users, tokens, IDs) and a logic layer on top of Playwright that correctly handles dynamic parameters. Approach: Wir haben Playwright gelehrt, den richtigen HAR-Eintrag zu finden, auch wenn sich die Abfrage/Körperwerte ändern und es verhindert wurde, dass Entitäten mit dynamischen Identifikatoren wiederverwendet werden. What we did: E2E-Tests wurden umweltunabhängig, laufen stabil in CI/CD, benötigen kein Backend und enthalten keine persönlichen Daten. Result: Why mock the network in E2E tests at all? Warum lächerlich das Netzwerk in E2E-Tests überhaupt? Obwohl E2E-Tests dazu dienen, die Anwendung als Ganzes zu testen, müssen Sie in der Praxis fast immer die Benutzeroberfläche von echten Netzwerkanrufen isolieren. 1. Test stability Ein echtes Feuer kann: Nicht verfügbar sein Sei langsam Unvorhersehbare Daten zurückgeben Mocks beseitigen Zufall und machen Tests reproduzierbar. 2. Speed Even with sequential test runs, mock responses are returned Keine echten Netzanrufe. instantly Dies macht Tests mehrmals schneller als das Treffen des echten Backend. 3. Reducing load on the backend Wenn E2E-Tests parallel laufen, generieren sie viele gleichzeitige Anfragen. Erstellen von Lastspikes auf dem Testserver, führt zu Zinsgrenzfehlern, Grundsätzlich „DDoS“ Ihr eigenes Backend. Mocks entfernen die Netzwerkbelastung vollständig - das Backend nimmt überhaupt nicht am Testlauf teil. 4. Independence from external services Stripe, S3, Geocoders, OpenAI - alles, was scheitern kann, wird schließlich scheitern. Mocks verwandeln E2E-Tests in eine vollständig autonome Schicht, die nicht von APIs von Drittanbietern abhängt. Aber es gibt einen Nachteil: Wenn ein externer Dienst seinen Vertrag ändert oder stürzt, wird ein lächerlicher Test nie wissen und wird glücklich grün bleiben. How Playwright mocks the network Wie Playwright das Netz lächerlich macht Playwright has a low-level interface for intercepting and substituting requests: browserContext('**/api/users', route => { route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(mockUsers), }); }); Jede Anfrage, die dem Muster entspricht (in diesem Beispiel endet mit /api/Nutzer) wird lokal bearbeitet - ohne auf das Internet zu gehen, und die zu erfüllenden Daten werden als Antwort auf diese Anfrage "zu dem Client" zurückgegeben. What is a HAR file and why is it convenient for testing? Was ist eine HAR-Datei und warum ist sie für Tests geeignet? is a JSON file that contains: HAR (HTTP Archive) Alle Seiten Anfragen Parameter anfordern Server Antworten Mit anderen Worten, HAR ist eine Aufzeichnung von real network activity. Wenn Sie ein HAR einmal erstellen (z. B. anmelden, eine Liste öffnen, eine Produktkarte laden), können Sie diese Datei dann als Quelle für Spott verwenden, die das tatsächliche API-Verhalten vollständig reproduziert. That’s why HAR is perfect when you: Es ist notwendig, den Netzzustand zu beheben wollen die UI testen, ohne das Backend zu starten Wir brauchen ein deterministisches Szenario, das der Realität so nahe wie möglich ist. How Playwright uses HAR files for mocking Wie Playwright HAR-Dateien zum Mocking verwendet Der Playwright kann: Rekord hat Replay HAR ohne echte Netzwerk-Anrufe Beide Vorgänge erfolgen über die routeFromHAR-Methode auf browserContext: browserContext.routeFromHAR(harFilePath, options); 1) Recording HAR browserContext.routeFromHAR(harFilePath, {update: true, url: /api\./}); Playwright abfängt automatisch alles, was im Browser geschieht (es sei denn, Ausnahmen sind in Optionen konfiguriert) und speichert es in *.har-Datei(n) 2) Replaying HAR browserContext.routeFromHAR(harFilePath, {update: false, url: /api\./}); Nun, wenn ein Test eine Anfrage macht, die im HAR existiert, gibt Playwright die gespeicherte Antwort sofort zurück, ohne ins Netzwerk zu gehen. Sie können mehr über die Aufnahme und Wiedergabe von HAR in den Playwright-Dokumenten lesen. You can read more about recording and replaying HAR in the Playwright . docs docs Advantages of HAR mocking Vorteile von HAR Mocking 1. Realistische Daten HAR contains real server responses, and the UI sees them exactly as they were at the moment of recording. 2. Vollständige Isolierung Tests laufen auch auf einer lokalen Maschine ohne Backend. 3. Hohe Geschwindigkeit HAR-Antworten werden sofort zurückgegeben - Tests laufen mit maximaler Geschwindigkeit. Ideal für komplexe Flüsse Zum Beispiel: Authentifizierung Komplexe Filter request chains Seiten mit Dutzenden von API-Anrufen Das Erzeugen solcher Spottes von Hand ist schwierig, und HAR löst es automatisch. Why HAR mocks can unexpectedly break Warum HAR-Mocks unerwartet brechen können Eine aufgezeichnete HAR-Datei ist ein Snapshot von Netzwerkanfragen, die während der Testausführung beim Treffen des echten Backend gemacht werden. Als Ergebnis kann die Datei dynamische Daten, Benutzer-IDs in URLs und sensible Informationen (Auth-Token, E-Mails usw.) enthalten. In unserem Projekt haben wir 4 Probleme mit Daten in HAR-Dateien aufgetreten: 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. An den Benutzer weitergegeben, unter dem das HAR aufgezeichnet wurde In practice, developers recorded HAR files while logged in as different users, which led to URLs with user IDs becoming a problem right away. Example: In our app, a user can use chat and also view a list of received emails on a separate page. Tests für die chat-seite verwenden mocks von enthält eine Benutzerlisteanfrage für einen Benutzer mit ID : chats.har, unique-user-id-1 GET /unique-user-id-1 / Benutzer / Liste GET /unique-user-id-1 / Benutzer / Liste { "entries": [ { "request": { "method": "GET", "url": "/unique-user-id-1/users/list" } } ] } Tests für die E-Mails-Seite verwenden Scheiße von , die auch eine Benutzerlisteanfrage enthält, aber unter einem Benutzer mit ID aufgezeichnet wurde emails.har unique-user-id-2: GET /unique-user-id-2 / Benutzer / Liste GET /unique-user-id-2 / Benutzer / Liste { "entries": [ { "request": { "method": "GET", "url": "/unique-user-id-2/users/list" } } ] } Die Folgen: Playwright, beim Wiedergeben, entspricht Anfragen streng nach URL, Methode und Körper, so dass selbst ein kleiner Mismatch den Spott bricht. Wenn wir alle Tests durchführen, die als Benutzer mit ID angemeldet sind , Playwright wird nicht in der Lage sein, die benötigte Einheit in beim Ausführen der E-Mail-Seiten-Tests, da der Endpunkt GET wurde für Benutzer aufgezeichnet Während Playwright auf der Suche nach 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 2. Dynamische Teile von URLs Example: Die HAR-Datei kann einen Eintrag mit einer auf der Clientseite generierten Anfrage-ID enthalten: { "entries": [ { "request": { "method": "GET", "url": "/generate?request-id=fc21b48a-e84d-4b-92-a494d65a280a" } } ] } Consequences: will be unique each time (one value at recording time, another at replay time), so Playwright will never find this entry on subsequent test runs, again because Playwright strictly compares URL data when searching. request-id 3. Dynamic request body Wenn der Körper Werte enthält, die mit den bei einem vorherigen Schritt erhaltenen Daten übereinstimmen müssen (z.B. request-id von /generate), kann Playwright nur dann den richtigen HAR-Eintrag finden, wenn diese Werte genau übereinstimmen. Obwohl solche Parameter von Natur aus einzigartig sind, muss ihr Wert bei allen verwandten Anfragen im Test gleich sein.Wenn die anforderungs-id, die an /generate weitergegeben wurde, nicht mit request_id im nachfolgenden Anforderungskörper übereinstimmt, kann Playwright keinen passenden Eintrag finden, und der Spott funktioniert einfach nicht. where the previously generated request-id is passed in the body of a subsequent request: Example { "entries": [ { "request": { "method": "POST", "url": "/generate-result", "postData": { "text": "{\"request_id\":\"fc21b48a-e84d-4b-92-a494d65a280a\"}" } } } ] } Consequences: wenn unterscheidet sich von dem, was in der /generate-Anfrage war, wird Playwright den entsprechenden Eintrag im HAR nicht finden. 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: Echte Benutzerdaten können im Repository enden, da HAR-Dateien für CI/CD-Testläufe im Repo sein müssen. And hopefully your auth endpoint doesn’t accept such data in plain text in real life We ended up with these tasks: Wir beenden mit diesen Aufgaben: HAR files must not depend on the user they were recorded under and must not contain sensitive data Es sollte nicht wichtig sein, wo wir sie aufgezeichnet haben - wir wollen sie verwenden, ohne von Benutzern und ihren Daten abhängig zu sein. Die Datei darf keine tatsächlichen Benutzerdaten enthalten – nur kontrollierte Testwerte. We need to teach our tests to work with dynamic data Endpunkte mit dynamischen Daten müssen in HAR gefunden und nur einmal im Test verwendet werden, genau wie bei echten Backend-Anrufen: eine spezifische Anfrage - eine spezifische Antwort. Wenn die Testlogik einen Endpunkt mit Daten aus einem anderen Endpunkt anrufen muss, muss der streng entsprechende HAR-Eingang verwendet werden. How to approach the solution How to approach the solution HAR Normalisierung - ein separates Skript, das: 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 Dynamische Datenübernahme Anfragen zu URLs mit dynamischen Daten werden abgefangen und der richtige HAR-Eintrag wird in der Antwort zurückgegeben. HAR normalization Die Normalisierung Since we need to normalize previously generated HARs, the task comes down to automatically detecting user credentials (userId, email, token) and replacing them with controlled test values. We split the process into two major steps: from the auth request, because this is the only place where we can reliably find the correct user data: Extract real user data userId E-Mail Authentifizierung Token user-sensitive data with test data everywhere: Walk through all HAR entries and replace in all URLs in Anfrage/Antwort-Header in request/response bodies Below is a simplified version of how such normalization can be implemented, already split into logical parts. Step 1. Extract user data from HAR Zuerst finden wir eine erfolgreiche auth-Anfrage (/auth mit 200-Status) und ziehen userId, E-Mail und Token heraus. 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; } You can see the HAR file type in more detail here: 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 Als nächstes müssen wir die Abhängigkeit von einem bestimmten UserId in URLs loswerden: 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 Headers often contain tokens and other things that shouldn’t appear in the repository. 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 }; }); } If needed, you can also add replacement logic for Authorization, X-User-Id, and other custom headers here. 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 Result: putting it all together in normalizeHarFile Nun, da wir alle Helper-Funktionen haben, ist der letzte Schritt, alle Einträge zu durchlaufen und die Normalisierung auf alle Teile der Anfragen / Antworten anzuwenden. /** * 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 Dynamische Datenübernahme In our system, there are several related endpoints: one receives request-id in query parameters (generated on the client), and later the same request-id must appear in the body of another POST request. Bei der Wiedergabe von HAR passt Playwright strikt nach url + method + body und hat keine Ahnung, dass zwei verschiedene Anfragen logisch durch die gleiche Anfrage-id verbunden sind. Sequence of steps Wir teilen die Arbeit mit dynamischen Daten in mehrere Schritte auf Basic HAR wiring through routeFromHAR Playwright still replays everything it can strictly match. Add a wrapper that: HarMocks Laden im Gedächtnis, kann den richtigen Eintrag unter Berücksichtigung der Dynamik durchsuchen (Entfernen von Abfrageparametern, Durchsuchen im Körper usw.) Stores haben bereits Anfrage-id-Werte verwendet, um die Wiederverwendung des gleichen Datensatzes zu vermeiden Intercept problematische URLs über 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 Jedes Mal, wenn Playwright einen HAR-Eintrag nicht aus der Box matchen kann, können wir: intercept the request, den richtigen Eintrag manuell finden, use it once via route.fulfill(), Markieren Sie die Anfrage-id wie verwendet. Step 1. Basic HAR setup via routeFromHAR Schritt 1. Basic HAR Setup über routeFromHAR Beginnen wir mit einer einfachen Klasse, die HAR laden und an Playwright befestigen kann. 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, }); } } Zu diesem Zeitpunkt kann Playwright bereits HAR wiedergeben, aber immer noch „überfällt“ auf dynamischen Parametern. . HarMocks Step 2. State for working with dynamic parameters Step 2. State for working with dynamic parameters Wir brauchen es: store already used values, request-id remember values found in one request so we can use them in another.\ request-id 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 Step 3. Helper methods for searching entries 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 Schritt 4. Abfangen einer Anfrage mit dem request-id in der Abfrage The first endpoint: Kommt in die Abfrage Playwright selbst findet den HAR-Eintrag aufgrund eines strengen URL-Vergleichs nicht, so dass wir es für Playwright tun. 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: Wir abfangen die Anfrage mit dem Muster **/with-dynamic-request-id/**. We remove the dynamic from the URL to find the matching entry in HAR. request-id Via we ensure this hasn’t been used before. customCheck request-id Wir speichern die Anfrage-id in foundSearchParams und usedRequestIds. Wir geben die Antwort von HAR über route.fulfill() zurück, anstatt das tatsächliche Backend zu treffen. Step 5. Intercepting a request where request-id is in the body Schritt 5. Abfangen einer Anfrage, wenn die Anfrage-id im Körper ist Der zweite Endpunkt sollte die gleiche Anforderungs-id verwenden, diesmal jedoch innerhalb des Anforderungskörpers als Anfrage mit 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: We take the previously saved from request-id foundSearchParams. Wir suchen nach einem HAR-Eintrag, bei dem sich diese Anfrage-id unter dem request_id-Schlüssel im Körper befindet. If found, we return that entry in the test. Step 6. Static URL + dynamic request_id in the body Statische URL + dynamische request_id im Körper Ein zusätzlicher Fall: Die URL ändert sich nicht, aber der Anfragekörper enthält eine eindeutige , and we want to use each such entry only once. 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 || '{}', }); }) Das Ganze zusammenbringen Damit sich die Testlogik wie bei einem echten Backend verhält, müssen wir: Lass den Playwright HAR überall dort verwenden, wo strenge Übereinstimmungen funktionieren. Für dynamische Endpunkte können Sie Anfragen manuell abfangen, URL und Körper normalisieren, den richtigen Eintrag auswählen und sicherstellen, dass jede Anfrage-id nur einmal verwendet wird. The code above implements exactly this layer on top of . routeFromHAR What does Playwright think about this? What does Playwright think about this? At the moment, Playwright remains a “simple HAR player” with no normalization layer: Strenge Übereinstimmung nach URL / Methode / Körper. Keine Cross-Environment/BaseURL-aware HAR Unterstützung. Playwright doesn’t know your domain logic.. That’s why separate solutions appear in the ecosystem on top of Playwright - , der oder custom Lösungen wie oder . Schauspieler-Advanced-har playwright-network-cache Hacking von Playwright Network Recordings Die versteckten Kosten von Playwright's API Mocking (und unsere maßgeschneiderte Lösung) Schauspieler-Advanced-har playwright-network-cache Hacking von Playwright Network Recordings Die versteckten Kosten von Playwright's API Mocking (und unsere maßgeschneiderte Lösung) Conclusion Schlussfolgerung Statt einer Reihe von zerbrechlichen Spottes kamen wir zu einem einheitlichen System, in dem: ist unter jedem Benutzer aufgezeichnet, automatisch normalisiert werden, mit völlig gefälschten Daten verwendet, und funktioniert auch bei dynamischen Parametern korrekt. Dieser Ansatz ist besonders nützlich in großen Projekten mit vielen API-Anrufen und paralleler Entwicklung: E2E-Tests bleiben schnell, deterministisch und unabhängig von den tatsächlichen Nutzern. Geschrieben von Sergey Levkovich, Senior Frontend Developer bei Social Discovery Group. Geschrieben von Sergey Levkovich, Senior Frontend Developer bei Social Discovery Group. geschrieben von , Senior Frontend Developer at . Sergey Levkovich Social Discovery Group Sergej Levkovich Sergej Levkovich Soziale Entdeckungsgruppe Soziale Entdeckungsgruppe