Jak firma Policybazaar zmniejszyła koszty audytu o 92% i przyspieszyła dostarczanie ekranów o ponad 90% dzięki Narzędziom deweloperskim w Chrome dla agentów i Przewodnikowi po współczesnych technologiach internetowych

Aman Soni

Swetha Gopalakrishnan

Opublikowano: 10 listopada 2026 r.

Policybazaar to jedna z największych platform ubezpieczeniowych w Indiach, która ma ponad 97 milionów zarejestrowanych klientów. Około 80% klientów odwiedza witrynę co miesiąc. Jej firma nadrzędna, PB Fintech, niedawno uruchomiła Pensionbazaar, kompleksową platformę do planowania emerytury, która jest marką należącą do Paisabazaar Marketing & Consulting Private Limited.

Oba zespoły korzystają już z agentów do kodowania, którzy szybko piszą kod, ale nie widzą, co ten kod robi w przeglądarce. Agenci często sięgali po nieaktualne wzorce internetowe i nie mieli możliwości sprawdzenia, czy ekran renderuje się prawidłowo, więc inżynierowie i tak musieli wszystko weryfikować ręcznie.

Aby rozwiązać ten problem, obie firmy połączyły w swoich Agentic Workflows 2 narzędzia: Przewodnik po współczesnych technologiach internetowych, który uczy modele nowoczesnych standardów internetowych, oraz Narzędzia deweloperskie w Chrome dla agentów, które zapewniają agentom działającą w czasie rzeczywistym przeglądarkę bez interfejsu graficznego do sprawdzania i weryfikowania ich pracy.

Oto jak to wpłynie na Ciebie:

Wyzwanie: szybkie kodowanie, powolna weryfikacja

Firmy Policybazaar i Pensionbazaar napotkały 2 różne problemy, których standardowe przepływy pracy związane z kodowaniem AI nie były w stanie zoptymalizować na poziomie produkcyjnym.

Pensionbazaar: nowe ekrany z długimi cyklami kontroli jakości

Pensionbazaar potrzebował dziesiątek nowych, złożonych ekranów, takich jak wieloetapowy kalkulator Retirement Freedom Score, dostosowywane prognozy wydatków inwestycyjnych i automatyczne raporty z rekomendacjami. Zespół utworzył je za pomocą agentów kodujących i serwera MCP Figma, ale 2 problemy wydłużały cykle kontroli jakości.

Po pierwsze agenci kodowali w ciemno. Model podstawowy mógłby wygenerować kod, ale nie mógłby zobaczyć wyrenderowanego interfejsu, porównać obliczonych stylów ze specyfikacjami projektu, wykryć przesunięć układu ani odczytać kaskady sieciowej. Dlatego powiązane problemy, takie jak przycięty interfejs i przesunięcia układu, dotarły aż do etapu ręcznej kontroli jakości.

Po drugie, wygenerowany kod był przestarzały. Bez znajomości nowoczesnej platformy internetowej agenci korzystali z przestarzałych rozwiązań, pisząc skomplikowane okna modalne w języku JavaScript zamiast używać wbudowanego elementu <dialog>, dodając niepotrzebne polyfille i pomijając wskazówki dotyczące wydajności, takie jak fetchpriority.

Policybazaar: 30 stron docelowych i ręczna kontrola

Zespół Policybazaar ds. ubezpieczeń na życie prowadzi około 30 stron docelowych dla różnych produktów ubezpieczeniowych, a każda strona może mieć różne wersje dla różnych kampanii marketingowych. Łącznie odwiedza je od 200 000 do 300 000 użytkowników dziennie, a każda strona jest co miesiąc aktualizowana pod kątem projektu i logiki biznesowej. Zespół musi dbać o wysokie wyniki podstawowych wskaźników internetowych i upewniać się, że każdy wariant jest dostępny i prawidłowo renderowany na ekranach o różnych rozmiarach.

Przed wprowadzeniem automatyzacji inżynier sprawdzał każdą stronę ręcznie:

1. Uruchom PageSpeed Insights, aby zebrać dane o użytkownikach ze świata rzeczywistego.
2. Oceń wyniki i zalecenia dotyczące Core Web Vitals.
3. Sprawdź kompilację deweloperską lub przejściową, zdiagnozuj problemy, które wpływają na wyniki, i zastosuj poprawki kodu aplikacji.

Proces był powolny, powtarzalny i nie można go było skalować. Prowadziło to do pomijania optymalizacji, niespójnego zakresu kontroli, niewykrytych regresji wydajności i opóźnionych wersji.

Przed zmianą sposobu pracy zespoły wyznaczyły sobie 3 cele: skrócić czas poświęcany przez deweloperów na audyty wydajności o ponad 80% przy jednoczesnym zapewnieniu ciągłości audytów, skrócić czas kontroli jakości dzięki zweryfikowanym raportom oraz zmniejszyć liczbę błędów interfejsu zgłaszanych z powodu niezgodności ekranu z makietami.

Rozwiązanie: pętla kodu do weryfikacji

Pensionbazaar wypełnił lukę między pisaniem kodu a jego sprawdzaniem. Agent pisze kod, uruchamia czystą instancję przeglądarki, automatycznie sprawdza stronę pod kątem zgodności wizualnej, błędów układu, błędów konsoli i wydajności, a następnie naprawia znalezione problemy przy minimalnej interwencji człowieka. Agent pobiera projekt z Figma MCP, dzięki czemu może porównać wyrenderowaną stronę z zamierzeniami projektantów.

Ten film pokazuje, jak działa ta pętla. Agent odczytuje projekty Figma nowego ekranu, wdraża go, a następnie używa Narzędzi deweloperskich w Chrome dla agentów, aby sprawdzić wyrenderowaną stronę i naprawić znalezione różnice.

Krok 1. Oprzyj agenta na nowoczesnych standardach internetowych

Zespół Pensionbazaar chciał, aby wygenerowany kod był zgodny z nowoczesnymi sprawdzonymi metodami dotyczącymi internetu, korzystał z aktualnych funkcji platformy i nadal działał w starszych przeglądarkach. Ręczne sprawdzanie jest uciążliwe, a pracownicy obsługi klienta nie zawsze są na bieżąco z platformą. Przewodnik po współczesnych technologiach internetowych rozwiązuje ten problem. Jest to umiejętność agenta, napisana i utrzymywana przez ekspertów internetowych z Chrome i społeczności internetowej, która obejmuje ponad 200 przypadków użycia. Kieruje agentów do nowoczesnych interfejsów API platformy internetowej oraz do sprawdzonych metod dotyczących wydajności i ułatwień dostępu, które pasują do Twojego celu Baseline. Jeśli nie ustawisz wartości docelowej, domyślnie zostanie ustawiona wartość Baseline Widely Available.

Po pobraniu kontekstu z plików Figma agent używa Przewodnika po współczesnych technologiach internetowych podczas pisania kodu. W przypadku Pensionbazaar oznaczało to 3 zmiany w kodzie:

• Elementy natywne zastąpiły obejścia JavaScriptu. Pracownik użył wbudowanego elementu <dialog> i interfejsu Popover API do utworzenia okien modalnych ze szczegółami planu oraz CSS Grid i Flexbox do utworzenia kart podsumowania finansowego.
• Agent dodał wskazówki dotyczące wydajności, które modele podstawowe zwykle pomijają. Obejmowały one fetchpriority="high" w przypadku obrazów LCP, loading="lazy" w przypadku kart planów w części strony widocznej po przewinięciu oraz budżet wykonania oparty na czasie z scheduler.yield() w celu ochrony interakcji do kolejnego wyrenderowania (INP).
• Nowoczesne funkcje nie powodowały problemów w starszych przeglądarkach. Pensionbazaar obsługuje starsze wersje przeglądarek, które definiuje w Browserslist. Agent użył funkcji takich jak pseudoklasa CSS :user-invalid i autoComplete="one-time-code" w polu hasła jednorazowego. Starsze przeglądarki je ignorują, a główne funkcje nadal działają.

Modele podstawowe nie były dalekie od ideału. Pod względem skuteczności zespół uznał, że są one zgodne ze sprawdzonymi metodami w około 70%. Raport agenta zawierał 12 reguł Przewodnika po współczesnych technologiach internetowych, które pozwoliły wyeliminować pozostałe luki. 4 przykłady:

W przypadku Pensionbazaar naszym priorytetem od samego początku było tworzenie wysokiej jakości kodu, aby uniknąć długu technicznego w przyszłości. Przewodnik po współczesnych technologiach internetowych pomógł naszemu agentowi kodującemu przyjąć nowoczesne standardy internetowe i sprawdzone metody dotyczące wydajności, jednocześnie uwzględniając nasze konkretne cele związane ze zgodnością z przeglądarkami. Dzięki temu inspekcje kodu frontendu stały się znacznie łatwiejsze i szybsze, co ostatecznie skróciło czas tworzenia oprogramowania.

Aman Soni, Engineering Manager, Policybazaar

Krok 2. Udostępnij agentowi przeglądarkę

Narzędzia deweloperskie w Chrome dla agentów to zestaw narzędzi, w tym serwer MCP, interfejs wiersza poleceń i umiejętności agenta, który zapewnia agentom kodującym dostęp w czasie rzeczywistym do danych debugowania środowiska wykonawczego, takich jak dzienniki konsoli, ruch w sieci, drzewo ułatwień dostępu i inne funkcje Narzędzi deweloperskich.

Zespół zainstalował Narzędzia deweloperskie w Chrome dla agentów jako wtyczkę w swoim agencie kodowania Claude Code:

# Add the marketplace registry
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp

# Install the plugin (MCP server and skills)
/plugin install chrome-devtools-mcp@chrome-devtools-plugins

Zespół chciał, aby każdy test był uruchamiany w czystej instancji przeglądarki, dzięki czemu zainstalowane rozszerzenia do Chrome nie mogłyby wpływać na wyniki, a dane osobowe lub poufne nie mogłyby wyciekać. Aby go uzyskać, dodaj --isolated do tablicy args w konfiguracji serwera MCP:

{
  "args": ["-y", "chrome-devtools-mcp@latest", "--isolated"]
}

Jeśli testy wymagają istniejącej sesji przeglądarki, w której użytkownik jest zalogowany, użyj --autoConnect.

Krok 3. Pozwól agentowi sprawdzić i poprawić własną pracę

Zespół inżynierów wymienia kontrole w instrukcjach agenta jako prompt lub umiejętność agenta. Ogólnie rzecz biorąc, agent wykonuje te czynności:

• Sprawdza drzewo DOM i obliczony kod CSS, a następnie porównuje je z projektem w Figmie.
• Zmienia rozmiar strony na widoki mobilne, aby przetestować responsywność.
• Rejestruje ślady wydajności, aby znaleźć długie klatki animacji (LoAF) spowodowane przez skrypty, zasoby blokujące renderowanie i inne problemy z wydajnością.
• Przepisuje kod, aby naprawić niezgodności projektowe, problemy z wydajnością i wyjątki konsoli, zanim inżynier go sprawdzi.

W tabeli poniżej znajdziesz informacje o tym, które narzędzia deweloperskie w Chrome dla agentów obsługują poszczególne testy:

Gdy agent znajdzie problem, taki jak tekst obcięty na małych ekranach, uszkodzone zawijanie flex lub niezoptymalizowany obraz, który powoduje przesunięcie układu, uruchamia krótką pętlę korekcyjną:

1. Narzędzia deweloperskie w Chrome dla agentów rejestrują dokładny błąd.
2. Agent analizuje dane i ponownie zapisuje problematyczny kod CSS lub JavaScript.
3. Pracownik obsługi klienta odświeża stronę, aby potwierdzić rozwiązanie problemu.

Na jednym ekranie agent wyrenderował stronę i stwierdził, że układ nagłówka, odstępy i gradient nie pasują do projektu. Naprawiono odpowiednie pliki (.scss). Wchodziła też w interakcję ze stroną, np. rozwijała akordeony, aby sprawdzić, czy ich stan otwarcia odpowiada projektom.

Krok 4. Przekaż zespołowi ds. kontroli jakości zweryfikowany raport

Po zakończeniu weryfikacji agent dostarcza kod gotowy do zastosowań produkcyjnych wraz z raportem z audytu dla zespołu ds. kontroli jakości. Dane w raporcie:

• Porównanie wizualne z projektem w Figmie, które wyróżnia różnice w pikselach, utworzone na podstawie zrzutów ekranu, zrzutów DOM i obliczonych stylów.
• Zrzuty ekranu wyrenderowanej strony w różnych rozmiarach ekranu.
• Core Web Vitals i diagnostyka wydajności z performance_start_trace i performance_analyze_insight, takie jak Speed Index i łączny czas blokowania (TBT).
• Wyniki Lighthouse dotyczące SEO, sprawdzonych metod i ułatwień dostępu z lighthouse_audit.
• Sprawdzanie, czy interakcje, takie jak zwijanie wierszy i przełączniki, działają prawidłowo, a także błędy konsoli i zmiany stanu aplikacji, takie jak edytowanie wierszy, usuwanie wierszy i puste stany.

Zastosowanie tego samego podejścia do 30 stron kampanii

Na swojej głównej platformie Policybazaar zastąpiła ręczne uruchamianie PageSpeed Insights audytami przeprowadzanymi za pomocą Narzędzi deweloperskich w Chrome dla agentów w Kiro. Zanim strona kampanii zostanie opublikowana, inżynier uruchamia kontrolę adresu URL wersji testowej na urządzeniach mobilnych i komputerach. Agent przeprowadza audyty wydajności i Lighthouse, a Narzędzia deweloperskie w Chrome dla agentów automatycznie pobierają rzeczywiste dane z pól Raportu na temat użytkowania Chrome (CrUX) wraz z danymi laboratoryjnymi. Zastąpiło to całkowicie krok PageSpeed Insights.

Następnie agent zgłasza wyniki skuteczności, znalezione wąskie gardła i listę ulepszeń, które inżynier powinien wprowadzić, wraz z priorytetami. Podczas jednej z kontroli przedpremierowych wykryto niekrytyczne wywołania interfejsu API, które były uruchamiane jedno po drugim podczas wczytywania strony i konkurowały z krytycznymi zadaniami renderowania. Zespół rozwiązał problem, zanim strona została opublikowana.

Agent przeprowadza teraz 12 audytów wydajności w czasie, którego inżynier potrzebuje na wykonanie jednego. To o 92% mniej pracy ręcznej.

Wydajność stron internetowych jest dla nas ważna, ponieważ chcemy zapewnić użytkownikom dobre wrażenia, ale ręczne sprawdzanie, ocenianie kaskad i śladów na dziesiątkach stron docelowych było żmudne i stanowiło poważne wąskie gardło. Narzędzia deweloperskie w Chrome dla agentów przekształciły ten proces i skróciły czas audytu wydajności naszych inżynierów o 92%, dzięki czemu mogą oni skupić się na bardziej złożonych zadaniach.

Aman Soni, Engineering Manager, Policybazaar

Wpływ

Przewodnik po współczesnych technologiach internetowych i Narzędzia deweloperskie w Chrome dla agentów przekształciły testowanie frontendu w Policybazaar i Pensionbazaar z procesu ręcznego i reaktywnego w proces zautomatyzowany i proaktywny. Tabela poniżej zawiera porównanie przepływów pracy przed zmianą i po niej:

Zmniejszenie o 92% przekroczyło cel zespołu, który wynosił ponad 80%. Regresje strony docelowej są wykrywane, zanim trafią do środowiska testowego lub kontroli jakości. W Pensionbazaar kod jest dostarczany już po sprawdzeniu, ze zrzutami ekranu dla kilku widocznych obszarów, co ogranicza wymianę informacji między zespołami projektowymi, inżynieryjnymi i QA.

Wnioski dla zespołu

• Oprzyj agenta na wiarygodnych wskazówkach. Dzięki wyselekcjonowanym wskazówkom, takim jak Przewodnik po współczesnych technologiach internetowych, agenty nie korzystają z przestarzałych wzorców, a kod jest zgodny z celami podstawowymi.
• Nie pozwól agentowi oznaczyć zadania związanego z interfejsem jako wykonanego, dopóki nie sprawdzi wyrenderowanej strony. Narzędzia deweloperskie w Chrome dla agentów umożliwiają agentowi sprawdzanie układu, widocznych obszarów i śladów wydajności w rzeczywistej przeglądarce.
• Określ jasne kryteria wyjścia z pętli. Ustaw limity kroków oraz wyraźne warunki zaliczenia i niepowodzenia, aby agent nie zapętlał się i nie marnował tokenów.
• Zacznij od stron o dużej częstotliwości, opartych na szablonach. Przepływy pracy w pętli zamkniętej najlepiej sprawdzają się tam, gdzie liczy się szybkość.
• Przeprowadzaj audyty w czystej przeglądarce. Użyj --isolated, aby rozszerzenia i dane z pamięci podręcznej nie wpływały na wyniki ani nie ujawniały danych osobowych.

Zasoby

• Przewodnik po współczesnych technologiach internetowych
• Repozytorium źródłowe Przewodnika po współczesnych technologiach internetowych
• Dokumentacja Narzędzi deweloperskich w Chrome dla agentów
• Narzędzia deweloperskie w Chrome dla agentów na GitHubie