[Bug]: The API response mock does not work with WebKit only

[erayerdin]

Version

1.52.0

Steps to reproduce

1. Mock API response.
2. Request URL.
3. Get response.

Expected behavior

Get mocked response.

Actual behavior

Get real response only in WebKit.

Additional context

This is a minimal reproduction code:

test("check response", async ({ page }) => {
  const url = "https://api.npoint.io/6f7f9eaf9cb9b6f421b4";
  const data = [
    {
      name: "Foo",
      description: "foo",
    },
    {
      name: "Bar",
      description: "bar",
    },
  ];

  await page.route(url, async (route) => {
    await route.fulfill({
      json: data,
      headers: {
        ...route.request().headers(),
        "Cache-Control": "no-cache",
      },
    });
  });

  await page.goto("/settings"); // whatever page
  await page.locator('button[name="update-blacklist"]').click(); // or whatever button

  const localStorageData = await page.evaluate(
    (urlHash) => localStorage.getItem(`data-${urlHash}`),
    urlHash
  );
  expect(localStorageData).toEqual(JSON.stringify(data));

  await page.unroute(url);
});

And this is what the button calls essentially:

import { Product } from "@/types";

type FetchProductsParams = {
  link: string;
};

const updateProducts = async ({
  link,
}: FetchProductsParams): Promise<Product[]> => {
  const idBuffer = await window.crypto.subtle.digest(
    "SHA-256",
    new TextEncoder().encode(link)
  );
  // convert id to hex string
  const id = Array.from(new Uint8Array(idBuffer))
    .map((b) => b.toString(16).padStart(2, "0"))
    .join("");
  const dataKey = `data-${id}`;
  const expKey = `exp-${id}`;

  const response = await fetch(link);
  const data: Product[] = await response.json();
  localStorage.setItem(dataKey, JSON.stringify(data));
  localStorage.setItem(expKey, (Date.now() + 1000 * 60 * 60 * 24).toString());
  return data;
};

export default updateProducts;

In case you need Product type:

type Product = {
  name: string;
  description: string;
};

And also this is how it fails:

Expected: "[{\"name\":\"Foo\",\"description\":\"foo\"},{\"name\":\"Bar\",\"description\":\"bar\"}]"
Received: "[{\"name\":\"Milliyet\",\"description\":\"Gazete\"},{\"name\":\"Hürriyet\",\"description\":\"Gazete\"},{\"name\":\"Posta\",\"description\":\"Gazete\"},{\"name\":\"Fanatik\",\"description\":\"Gazete\"},{\"name\":\"Kanal D\",\"description\":\"Televizyon kanalı\"},{\"name\":\"CNNTürk\",\"description\":\"Televizyon kanalı\"},{\"name\":\"Teve2\",\"description\":\"Televizyon kanalı\"},{\"name\":\"Dsmart\",\"description\":\"Kablolu yayın markası\"},{\"name\":\"Kemer Country Hotels\",\"description\":\"\"},{\"name\":\"İddaa\",\"description\":\"Şans oyunu markası\"},{\"name\":\"Misli.com\",\"description\":\"Şans oyunu markası\"},{\"name\":\"Ülker\",\"description\":\"Gıda ürünleri markası\"},{\"name\":\"Godiva Mcvities\",\"description\":\"Lüks çikolata ve bisküvi markası\"},{\"name\":\"Superfresh\",\"description\":\"Hazır paketli yiyecek\"},{\"name\":\"Aytaç\",\"description\":\"\"},{\"name\":\"Besler\",\"description\":\"\"},{\"name\":\"Mis\",\"description\":\"Süt ve süt ürünleri markası\"},{\"name\":\"Şok\",\"description\":\"Market zinciri\"},{\"name\":\"Seç\",\"description\":\"Market zinciri\"},{\"name\":\"Bizim Toptan Market\",\"description\":\"\"},{\"name\":\"Migros\",\"description\":\"Süpermarket zinciri\"},{\"name\":\"Mion\",\"description\":\"Kişisel bakım ürünleri markası\"},{\"name\":\"Macro Center\",\"description\":\"Premium market zinciri\"},{\"name\":\"Coca Cola\",\"description\":\"Gazlı içecek markası\"},{\"name\":\"Fanta\",\"description\":\"Meyveli gazlı içecek\"},{\"name\":\"Sprite\",\"description\":\"Limonlu gazlı içecek\"},{\"name\":\"Fuse Tea\",\"description\":\"Soğuk çay markası\"},{\"name\":\"Damla\",\"description\":\"Su markası\"},{\"name\":\"Efes\",\"description\":\"Alkollü içecek markası\"},{\"name\":\"Adel Kalemcilik\",\"description\":\"Kırtasiye ürünleri markası\"},{\"name\":\"ISUZU\",\"description\":\"Otomotiv markası\"},{\"name\":\"Garenta Kiralama\",\"description\":\"Araç kiralama şirketi\"},{\"name\":\"A101\",\"rationale\":[{\"url\":\"https://web.archive.org/web/20250411102608/https://anlatilaninotesi.com.tr/services/dynamics/20250411/1095314103.html?endless=3\",\"type\":\"text\",\"channel\":\"other\",\"description\":\"Sahibi Turgut Aydın daha önce FETÖ/PDY'ye finansal destek sağlama konusunda yargılanıp serbest bırakıldı.\"}],\"description\":\"Market zinciri\"},{\"name\":\"Memorial\",\"rationale\":[{\"url\":\"https://web.archive.org/web/20250411102608/https://anlatilaninotesi.com.tr/services/dynamics/20250411/1095314103.html?endless=3\",\"type\":\"text\",\"channel\":\"other\",\"description\":\"Sahibi Turgut Aydın daha önce FETÖ/PDY'ye finansal destek sağlama konusunda yargılanıp serbest bırakıldı.\"}],\"description\":\"Özel hastane zinciri\"},{\"name\":\"English Home\",\"rationale\":[{\"url\":\"https://web.archive.org/web/20250411102608/https://anlatilaninotesi.com.tr/services/dynamics/20250411/1095314103.html?endless=3\",\"type\":\"text\",\"channel\":\"other\",\"description\":\"Sahibi Turgut Aydın daha önce FETÖ/PDY'ye finansal destek sağlama konusunda yargılanıp serbest bırakıldı.\"}],\"description\":\"Ev dekorasyon ürünleri markası\"},{\"name\":\"Eve Shop\",\"rationale\":[{\"url\":\"https://web.archive.org/web/20250411102608/https://anlatilaninotesi.com.tr/services/dynamics/20250411/1095314103.html?endless=3\",\"type\":\"text\",\"channel\":\"other\",\"description\":\"Sahibi Turgut Aydın daha önce FETÖ/PDY'ye finansal destek sağlama konusunda yargılanıp serbest bırakıldı.\"}],\"description\":\"\"},{\"name\":\"Pizza Lazza\",\"rationale\":[{\"url\":\"https://web.archive.org/web/20250411102608/https://anlatilaninotesi.com.tr/services/dynamics/20250411/1095314103.html?endless=3\",\"type\":\"text\",\"channel\":\"other\",\"description\":\"Sahibi Turgut Aydın daha önce FETÖ/PDY'ye finansal destek sağlama konusunda yargılanıp serbest bırakıldı.\"}],\"description\":\"\"},{\"name\":\"Saloon Burger\",\"rationale\":[{\"url\":\"https://web.archive.org/web/20250411102608/https://anlatilaninotesi.com.tr/services/dynamics/20250411/1095314103.html?endless=3\",\"type\":\"text\",\"channel\":\"other\",\"description\":\"Sahibi Turgut Aydın daha önce FETÖ/PDY'ye finansal destek sağlama konusunda yargılanıp serbest bırakıldı.\"}],\"description\":\"\"},{\"name\":\"Taç\",\"rationale\":[{\"url\":\"https://i.ibb.co/fdLfjsm4/ahmet-nazif-zorlu-ak-parti-kongresinde-goruldu-290449-news-big.jpg\",\"type\":\"image\",\"channel\":\"imgbb\",\"description\":\"Ahmet Nazif Zorlu’nun AK Parti Denizli 8. Olağan İl Kongresi'ne katılması\"},{\"url\":\"https://web.archive.org/web/20250111130935/https://www.istegundem.com/haber/ahmet-nazif-zorlu-ak-parti-kongresinde-goruldu/290449\",\"type\":\"text\",\"channel\":\"other\",\"description\":\"Ahmet Nazif Zorlu’nun AK Parti Denizli 8. Olağan İl Kongresi'ne katılması\"}],\"description\":\"Ev tekstili markası\"},{\"name\":\"Linens\",\"rationale\":[{\"url\":\"https://i.ibb.co/fdLfjsm4/ahmet-nazif-zorlu-ak-parti-kongresinde-goruldu-290449-news-big.jpg\",\"type\":\"image\",\"channel\":\"imgbb\",\"description\":\"Ahmet Nazif Zorlu’nun AK Parti Denizli 8. Olağan İl Kongresi'ne katılması\"},{\"url\":\"https://web.archive.org/web/20250111130935/https://www.istegundem.com/haber/ahmet-nazif-zorlu-ak-parti-kongresinde-goruldu/290449\",\"type\":\"text\",\"channel\":\"other\",\"description\":\"Ahmet Nazif Zorlu’nun AK Parti Denizli 8. Olağan İl Kongresi'ne katılması\"}],\"description\":\"Ev tekstili markası\"},{\"name\":\"Pierre Cardin\",\"rationale\":[{\"url\":\"https://i.ibb.co/fdLfjsm4/ahmet-nazif-zorlu-ak-parti-kongresinde-goruldu-290449-news-big.jpg\",\"type\":\"image\",\"channel\":\"imgbb\",\"description\":\"Ahmet Nazif Zorlu’nun AK Parti Denizli 8. Olağan İl Kongresi'ne katılması\"},{\"url\":\"https://web.archive.org/web/20250111130935/https://www.istegundem.com/haber/ahmet-nazif-zorlu-ak-parti-kongresinde-goruldu/290449\",\"type\":\"text\",\"channel\":\"other\",\"description\":\"Ahmet Nazif Zorlu’nun AK Parti Denizli 8. Olağan İl Kongresi'ne katılması\"}],\"description\":\"Moda markası\"},{\"name\":\"Vestel\",\"rationale\":[{\"url\":\"https://i.ibb.co/fdLfjsm4/ahmet-nazif-zorlu-ak-parti-kongresinde-goruldu-290449-news-big.jpg\",\"type\":\"image\",\"channel\":\"imgbb\",\"description\":\"Ahmet Nazif Zorlu’nun AK Parti Denizli 8. Olağan İl Kongresi'ne katılması\"},{\"url\":\"https://web.archive.org/web/20250111130935/https://www.istegundem.com/haber/ahmet-nazif-zorlu-ak-parti-kongresinde-goruldu/290449\",\"type\":\"text\",\"channel\":\"other\",\"description\":\"Ahmet Nazif Zorlu’nun AK Parti Denizli 8. Olağan İl Kongresi'ne katılması\"}],\"description\":\"Elektronik ve beyaz eşya markası\"},{\"name\":\"Regal\",\"rationale\":[{\"url\":\"https://i.ibb.co/fdLfjsm4/ahmet-nazif-zorlu-ak-parti-kongresinde-goruldu-290449-news-big.jpg\",\"type\":\"image\",\"channel\":\"imgbb\",\"description\":\"Ahmet Nazif Zorlu’nun AK Parti Denizli 8. Olağan İl Kongresi'ne katılması\"},{\"url\":\"https://web.archive.org/web/20250111130935/https://www.istegundem.com/haber/ahmet-nazif-zorlu-ak-parti-kongresinde-goruldu/290449\",\"type\":\"text\",\"channel\":\"other\",\"description\":\"Ahmet Nazif Zorlu’nun AK Parti Denizli 8. Olağan İl Kongresi'ne katılması\"}],\"description\":\"Ayakkabı markası\"},{\"name\":\"Bereket Döner\",\"description\":\"\"},{\"name\":\"Komagene\",\"description\":\"\"},{\"name\":\"Fakir\",\"description\":\"Elektronik ev aletleri markası\"},{\"name\":\"Delonghi\",\"description\":\"Elektronik ev aletleri markası\"},{\"name\":\"Braun\",\"description\":\"Elektronik ev aletleri markası\"},{\"name\":\"Kaave\",\"description\":\"\"},{\"name\":\"S Filo\",\"description\":\"\"},{\"name\":\"ATV\",\"description\":\"Televizyon kanalı\"},{\"name\":\"A Haber\",\"description\":\"Haber kanalı\"},{\"name\":\"Minika\",\"description\":\"Turkuvaz medyaya ait çocuk televizyon kanalı\"},{\"name\":\"D&R\",\"description\":\"Kitap, müzik ve elektronik mağazalar zinciri\"},{\"name\":\"İdefix\",\"description\":\"Kitap satış platformu\"},{\"name\":\"KargomSende\",\"description\":\"\"},{\"name\":\"Sabah\",\"description\":\"Gazete markası\"},{\"name\":\"Takvim\",\"description\":\"Gazete markası\"},{\"name\":\"Yeni Asır\",\"description\":\"Gazete markası\"},{\"name\":\"Fotomaç\",\"description\":\"Spor gazetesi\"},{\"name\":\"Energy Benzin İstasyonları\",\"description\":\"Akaryakıt istasyonu zinciri\"},{\"name\":\"Awox Dayanıklı Tüketim\",\"description\":\"\"},{\"name\":\"İstanbul Bilgi Üniversitesi\",\"description\":\"Özel üniversite\"},{\"name\":\"İTÜ ETA Doğa Koleji\",\"description\":\"Özel eğitim kurumu\"},{\"name\":\"Mediza Hastanesi\",\"description\":\"\"},{\"name\":\"Golden Hill Hotel\",\"description\":\"\"},{\"name\":\"Tokai\",\"description\":\"Çakmak markası\"},{\"name\":\"AktifBank\",\"description\":\"\"},{\"name\":\"Garanti Bankası\",\"description\":\"Bankacılık hizmetleri\"},{\"name\":\"NTV\",\"description\":\"Haber kanalı\"},{\"name\":\"Star\",\"description\":\"Televizyon kanalı\"},{\"name\":\"Kral FM\",\"description\":\"Radyo istasyonu\"},{\"name\":\"Puhu TV\",\"description\":\"\"},{\"name\":\"Volkswagen\",\"description\":\"Otomotiv markası\"},{\"name\":\"Audi\",\"description\":\"Lüks otomobil markası\"},{\"name\":\"Skoda\",\"description\":\"Otomotiv markası\"},{\"name\":\"Cupra\",\"description\":\"Otomotiv markası\"},{\"name\":\"Seat\",\"description\":\"Otomotiv markası\"},{\"name\":\"Günaydın Et\",\"description\":\"Et ürünleri markası\"},{\"name\":\"Nusr-Et\",\"description\":\"Et restoranları zinciri\"},{\"name\":\"KITCHENETTE\",\"description\":\"\"},{\"name\":\"Doğuş Çay\",\"description\":\"Çay markası\"},{\"name\":\"Patos\",\"description\":\"\"},{\"name\":\"Cipso\",\"description\":\"\"},{\"name\":\"Çerezos\",\"description\":\"\"},{\"name\":\"Espressolab\",\"description\":\"Kahveci markası\"},{\"name\":\"Sütiş\",\"description\":\"Süt ürünleri markası\"},{\"name\":\"Yörsan\",\"description\":\"Süt ürünleri markası\"},{\"name\":\"Keskinoğlu\",\"description\":\"Tavukçuluk ve gıda markası\"},{\"name\":\"Medical Park Hastanesi\",\"description\":\"Özel hastane zinciri\"},{\"name\":\"Liv Hospital\",\"description\":\"Özel hastane zinciri\"},{\"name\":\"ETS\",\"description\":\"Turizm acentası\"},{\"name\":\"Ucuzabilet.com\",\"description\":\"Online bilet satış platformu\"},{\"name\":\"Ebebek\",\"description\":\"Bebek ürünleri markası\"},{\"name\":\"Saray Muhallebicisi\",\"description\":\"\"},{\"name\":\"Evidea\",\"description\":\"Mobilya ve ev dekorasyon markası\"},{\"name\":\"BİM\",\"description\":\"Market zinciri\"},{\"name\":\"FİLE\",\"description\":\"Market zinciri\"},{\"name\":\"B&G Store\",\"description\":\"\"},{\"name\":\"Çetinkaya Mağazaları\",\"description\":\"\"},{\"name\":\"Kilim Mobilya\",\"description\":\"Mobilya markası\"},{\"name\":\"Atasay Altın\",\"description\":\"Mücevher markası\"},{\"name\":\"Çağrı Market\",\"description\":\"\"},{\"name\":\"KİM Market\",\"description\":\"\"},{\"name\":\"Sleepy\",\"description\":\"Bebek bezi markası\"},{\"name\":\"Özcanlar Köfte (Tekirdağ)\",\"description\":\"\"},{\"name\":\"Türkiye Petrolleri\",\"description\":\"Enerji şirketi\"},{\"name\":\"Torku\",\"description\":\"Gıda markası\"},{\"name\":\"Konya Şeker\",\"description\":\"Şeker ve gıda ürünleri\"},{\"name\":\"Kızılay\",\"description\":\"Maden suyu markası\"},{\"name\":\"Mado\",\"description\":\"Dondurma zinciri\"},{\"name\":\"Icemar\",\"description\":\"\"},{\"name\":\"Kızılkayalar Büfe\",\"description\":\"\"},{\"name\":\"Simit Sarayı\",\"description\":\"Simit ve kahve zinciri\"},{\"name\":\"Medipol Hastanesi\",\"description\":\"Özel hastane zinciri\"},{\"name\":\"Dünya Göz\",\"description\":\"Göz hastalıkları hastane markası\"},{\"name\":\"Güven Hastanesi\",\"description\":\"\"},{\"name\":\"Erden Hastanesi\",\"description\":\"\"},{\"name\":\"Emsey Hospital\",\"description\":\"\"},{\"name\":\"Türkiye Hastanesi\",\"description\":\"\"},{\"name\":\"Kiğılı\",\"description\":\"Moda markası\"},{\"name\":\"Kebir\",\"description\":\"Süt ürünleri markası\"},{\"name\":\"Kaanlar\",\"description\":\"Süt ürünleri markası\"},{\"name\":\"Peynirci Baba\",\"description\":\"\"},{\"name\":\"Danet\",\"description\":\"\"},{\"name\":\"Namet\",\"description\":\"\"},{\"name\":\"Coşkun Et Sucuk\",\"description\":\"Et ürünleri markası\"},{\"name\":\"Altınkılıç\",\"description\":\"Gıda markası\"},{\"name\":\"Yörükoğlu\",\"description\":\"Süt ürünleri markası\"},{\"name\":\"Yudum\",\"description\":\"Zeytinyağı markası\"},{\"name\":\"Sırma\",\"description\":\"Zeytinyağı markası\"},{\"name\":\"Egemden\",\"description\":\"Zeytinyağı markası\"},{\"name\":\"Burcu\",\"description\":\"Ketçap, mayonez ve konserve markası\"},{\"name\":\"Seydioğlu\",\"description\":\"Helva ve reçel markası\"},{\"name\":\"İçim\",\"description\":\"Süt ürünleri markası\"},{\"name\":\"President\",\"description\":\"Peynir markası\"},{\"name\":\"Masterini\",\"description\":\"\"}]"

Environment

System:
    OS: Linux 6.12 Pop!_OS 22.04 LTS
    CPU: (16) x64 13th Gen Intel(R) Core(TM) i5-13500H
    Memory: 5.74 GB / 15.31 GB
    Container: Yes
  Binaries:
    Node: 18.20.8 - /usr/bin/node
    npm: 10.8.2 - /usr/bin/npm
  IDEs:
    VSCode: 1.99.0 - /snap/bin/code
  Languages:
    Bash: 5.1.16 - /usr/bin/bash
  npmPackages:
    @playwright/test: ^1.52.0 => 1.52.0 
    playwright: ^1.52.0 => 1.52.0

[agg23]

While I thank you for the code you provided, it's hard to tell what is happening without a minimal repro. Could you please provide code to a scenario that exclusively demonstrates the issue you're having (ideally without referencing an external service)?

We have many tests for this functionality across web browsers, so without more information it's difficult to know where to look.