{"id":34682,"date":"2025-11-20T19:01:12","date_gmt":"2025-11-20T16:01:12","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/playwright-waitforresponse-ag-isteklerini-guvenle-yonetin\/"},"modified":"2025-11-20T19:01:12","modified_gmt":"2025-11-20T16:01:12","slug":"playwright-waitforresponse-ag-isteklerini-guvenle-yonetin","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/playwright-waitforresponse-ag-isteklerini-guvenle-yonetin\/","title":{"rendered":"Playwright waitForResponse: A\u011f \u0130steklerini G\u00fcvenle Y\u00f6netin"},"content":{"rendered":"
Playwright’\u0131n waitForResponse metodu ile asenkron web uygulamalar\u0131nda a\u011f isteklerini nas\u0131l g\u00fcvenle bekleyece\u011finizi ve testlerinizi veya web scraping i\u015flemlerinizi daha kararl\u0131 hale getirece\u011finizi \u00f6\u011frenin. Bu makale, temel kullan\u0131mdan ileri d\u00fczey tekniklere kadar Playwright’\u0131n g\u00fc\u00e7l\u00fc a\u011f y\u00f6netimini ad\u0131m ad\u0131m a\u00e7\u0131kl\u0131yor.<\/div>\n

G\u00fcn\u00fcm\u00fcz\u00fcn modern web uygulamalar\u0131, kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek ve h\u0131zl\u0131 etkile\u015fimler sa\u011flamak i\u00e7in b\u00fcy\u00fck \u00f6l\u00e7\u00fcde asenkron operasyonlara dayan\u0131r. Tek Sayfa Uygulamalar\u0131 (SPA’lar) ve karma\u015f\u0131k etkile\u015fimli aray\u00fczler, arka planda s\u00fcrekli olarak API \u00e7a\u011fr\u0131lar\u0131 yapar, veri \u00e7eker, kullan\u0131c\u0131 etkile\u015fimlerine yan\u0131t verir ve DOM’u dinamik olarak g\u00fcnceller. Bu dinamik yap\u0131, otomasyon s\u00fcre\u00e7lerinde, \u00f6zellikle test otomasyonu ve web scraping senaryolar\u0131nda ciddi zorluklar yarat\u0131r. Bir elementin sayfada g\u00f6r\u00fcnmesi, o elementin ba\u011fl\u0131 oldu\u011fu verinin veya arka plan i\u015fleminin ger\u00e7ekten tamamland\u0131\u011f\u0131 anlam\u0131na gelmeyebilir. Kullan\u0131c\u0131 bir butona bast\u0131\u011f\u0131nda, aray\u00fczde bir y\u00fckleme animasyonu belirebilir ancak verinin sunucudan gelmesi ve sayfan\u0131n bu veriyi i\u015flemesi birka\u00e7 y\u00fcz milisaniye hatta saniye s\u00fcrebilir. Bu “bekle ve g\u00f6r” durumu, otomasyon scriptlerinin en b\u00fcy\u00fck d\u00fc\u015fmanlar\u0131ndan biridir.<\/p>\n

Geleneksel otomasyon yakla\u015f\u0131mlar\u0131nda, bu t\u00fcr asenkron i\u015flemleri beklemek i\u00e7in setTimeout<\/code> gibi sabit gecikmeler kullan\u0131labilir. Ancak bu y\u00f6ntemler son derece g\u00fcvenilmezdir. A\u011f ko\u015fullar\u0131, sunucu yan\u0131t s\u00fcreleri veya uygulaman\u0131n kendisindeki performans dalgalanmalar\u0131 nedeniyle sabit bir bekleme s\u00fcresi ya \u00e7ok k\u0131sa kal\u0131p testin ba\u015far\u0131s\u0131z olmas\u0131na yol a\u00e7ar ya da gere\u011finden uzun olup otomasyon s\u00fcrecini yava\u015flat\u0131r. S\u00fcrekli bir “nerede beklemeliyim?” veya “ne kadar beklemeliyim?” sorusuyla bo\u011fu\u015fmak, geli\u015ftiriciler ve otomasyon m\u00fchendisleri i\u00e7in zaman kayb\u0131 ve moral bozuklu\u011fu kayna\u011f\u0131d\u0131r. Playwright gibi modern otomasyon ara\u00e7lar\u0131, bu t\u00fcr sorunlar\u0131 \u00e7\u00f6zmek i\u00e7in geli\u015fmi\u015f a\u011f y\u00f6netim yetenekleri sunar. Bu yetenekler aras\u0131nda waitForRequest<\/code>, waitForResponse<\/code> ve route<\/code> gibi metodlar \u00f6ne \u00e7\u0131kar. \u00d6zellikle waitForResponse<\/code>, belirli bir a\u011f iste\u011finin ba\u015far\u0131yla tamamlanmas\u0131n\u0131 ve bir yan\u0131t\u0131n al\u0131nmas\u0131n\u0131 beklemek i\u00e7in kritik bir ara\u00e7t\u0131r. Bu sayede, otomasyon senaryolar\u0131 ger\u00e7ekten uygulaman\u0131n mant\u0131ksal ak\u0131\u015f\u0131n\u0131 takip edebilir ve sadece g\u00f6rsel elementlerin varl\u0131\u011f\u0131na de\u011fil, ayn\u0131 zamanda arka plandaki veri ak\u0131\u015f\u0131na da odaklanabilir. Playwright’\u0131n a\u011f yakalama mekanizmalar\u0131, testlerin daha sa\u011flam, daha h\u0131zl\u0131 ve daha g\u00fcvenilir olmas\u0131n\u0131 sa\u011flayarak, geli\u015ftirme ve kalite g\u00fcvence s\u00fcre\u00e7lerini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir. Bu, \u00f6zellikle karma\u015f\u0131k API ba\u011f\u0131ml\u0131l\u0131klar\u0131 olan veya d\u0131\u015f hizmetlerle yo\u011fun bir \u015fekilde entegre olan uygulamalar i\u00e7in hayati \u00f6neme sahiptir. B\u00f6ylece, gereksiz ve tahmini gecikmelerden ka\u00e7\u0131narak, yaln\u0131zca ihtiya\u00e7 duyulan anda ve ihtiya\u00e7 duyulan s\u00fcre kadar bekleme stratejileri uygulanabilir.<\/p>\n

Playwright’\u0131n waitForResponse Metodu Nedir ve Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h2>\n

Playwright’\u0131n waitForResponse<\/code> metodu, web otomasyon d\u00fcnyas\u0131nda bir kurtar\u0131c\u0131 niteli\u011findedir. Temel olarak, taray\u0131c\u0131n\u0131n belirli bir a\u011f iste\u011fine y\u00f6nelik bir yan\u0131t\u0131 ba\u015far\u0131yla tamamlamas\u0131n\u0131 beklemek i\u00e7in tasarlanm\u0131\u015ft\u0131r. Bu metot sayesinde, otomasyon scriptleriniz, arka planda ger\u00e7ekle\u015fen ve genellikle g\u00f6zle g\u00f6r\u00fclemeyen HTTP\/HTTPS isteklerinin tamamland\u0131\u011f\u0131ndan emin olana kadar bekleyebilir. Bu, \u00f6zellikle bir kullan\u0131c\u0131 eyleminin (\u00f6rne\u011fin, bir butona t\u0131klama veya bir form g\u00f6nderme) bir veya daha fazla API \u00e7a\u011fr\u0131s\u0131n\u0131 tetikledi\u011fi ve bu \u00e7a\u011fr\u0131lar\u0131n yan\u0131tlar\u0131na ba\u011f\u0131ml\u0131 olarak sayfan\u0131n i\u00e7eri\u011finin veya durumunun de\u011fi\u015fti\u011fi senaryolarda hayati \u00f6nem ta\u015f\u0131r. waitForResponse<\/code> metodu, beklenecek yan\u0131t\u0131 tan\u0131mlamak i\u00e7in \u00e7e\u015fitli parametreler kabul eder, bu da onu son derece esnek k\u0131lar. En yayg\u0131n kullan\u0131lan parametre, yan\u0131t\u0131n URL’sidir. Bu URL’yi d\u00fcz bir string olarak, bir regex (d\u00fczenli ifade) olarak veya bir predicate fonksiyonu (bir ko\u015ful d\u00f6nd\u00fcren bir fonksiyon) olarak belirtebilirsiniz.<\/p>\n

Peki, waitForResponse<\/code> ne zaman kullan\u0131lmal\u0131? Birka\u00e7 \u00f6rnekle a\u00e7\u0131klayal\u0131m:<\/p>\n

    \n
  • \n API \u00c7a\u011fr\u0131lar\u0131n\u0131n Tamamlanmas\u0131n\u0131 Bekleme:<\/strong> Bir \u00fcr\u00fcn listesinin y\u00fcklendi\u011fi veya bir kullan\u0131c\u0131n\u0131n profil bilgilerinin g\u00fcncellendi\u011fi durumlarda, ilgili API yan\u0131t\u0131n\u0131n gelmesini beklemek i\u00e7in waitForResponse<\/code> kullan\u0131l\u0131r.\n <\/li>\n
  • \n Veri Y\u00fckleme Durumlar\u0131n\u0131 Kontrol Etme:<\/strong> Uzun s\u00fcren veri \u00e7ekme i\u015flemleri veya dosya y\u00fcklemeleri gibi durumlarda, i\u015flemin tamamland\u0131\u011f\u0131n\u0131 g\u00f6steren spesifik bir yan\u0131t kodunu veya yan\u0131t i\u00e7eri\u011fini beklemek i\u00e7in idealdir.\n <\/li>\n
  • \n Sayfa Navigasyonu Sonras\u0131 Arka Plan \u0130steklerini \u0130zleme:<\/strong> Bazen bir sayfaya gittikten hemen sonra bile, sayfa i\u00e7eri\u011fini doldurmak i\u00e7in ek API \u00e7a\u011fr\u0131lar\u0131 yap\u0131l\u0131r. waitForResponse<\/code> bu \u00e7a\u011fr\u0131lar\u0131n tamamland\u0131\u011f\u0131ndan emin olman\u0131z\u0131 sa\u011flar.\n <\/li>\n
  • \n \u0130ste\u011fe Ba\u011fl\u0131 Veri Y\u00fcklemeleri:<\/strong> Infinite scroll gibi durumlarda, kullan\u0131c\u0131 a\u015fa\u011f\u0131 kayd\u0131rd\u0131k\u00e7a yeni verilerin y\u00fcklenmesi i\u00e7in yap\u0131lan isteklerin yan\u0131t\u0131n\u0131 beklemek i\u00e7in kullan\u0131l\u0131r.\n <\/li>\n<\/ul>\n

    Metodun temel \u00e7al\u0131\u015fma prensibi, Playwright’\u0131n taray\u0131c\u0131n\u0131n a\u011f trafi\u011fini s\u00fcrekli olarak izlemesine dayan\u0131r. Siz waitForResponse<\/code>‘u \u00e7a\u011f\u0131rd\u0131\u011f\u0131n\u0131zda, Playwright bu anda taray\u0131c\u0131dan gelen t\u00fcm a\u011f yan\u0131tlar\u0131n\u0131 dinlemeye ba\u015flar. Belirtti\u011finiz URL veya predicate ko\u015fuluna uyan ilk yan\u0131t\u0131 ald\u0131\u011f\u0131nda, bu yan\u0131t nesnesini d\u00f6nd\u00fcr\u00fcr ve bekleme sona erer. E\u011fer belirtilen bir zaman a\u015f\u0131m\u0131 s\u00fcresi i\u00e7inde e\u015fle\u015fen bir yan\u0131t gelmezse, metot bir hata f\u0131rlat\u0131r. Bu, \u00f6zellikle testlerin veya scraping operasyonlar\u0131n\u0131n kararl\u0131l\u0131\u011f\u0131n\u0131 art\u0131rmak i\u00e7in kritik bir \u00f6zelliktir. A\u015fa\u011f\u0131daki basit kod blo\u011fu, waitForResponse<\/code>‘un temel kullan\u0131m\u0131n\u0131 g\u00f6stermektedir:<\/p>\n

    \n  import {{ test, expect }} from '@playwright\/test';\n\n  test('Bir API \u00e7a\u011fr\u0131s\u0131n\u0131n yan\u0131t\u0131n\u0131 ba\u015far\u0131yla beklemeli', async ({{ page }}) => {\n    \/\/ Sayfaya gitmeden \u00f6nce veya bir eylem ger\u00e7ekle\u015ftirmeden hemen \u00f6nce waitForResponse'u \u00e7a\u011f\u0131r\u0131n.\n    \/\/ Bu, Playwright'\u0131n iste\u011fi dinlemeye ba\u015flamas\u0131n\u0131 sa\u011flar.\n    const responsePromise = page.waitForResponse(response =>\n      response.url().includes('\/api\/data') && response.status() === 200\n    );\n\n    \/\/ API \u00e7a\u011fr\u0131s\u0131n\u0131 tetikleyecek bir eylem ger\u00e7ekle\u015ftirin.\n    \/\/ \u00d6rne\u011fin, bir butona t\u0131klay\u0131n veya do\u011frudan bir URL'ye gidin.\n    await page.goto('https:\/\/example.com\/data-page');\n\n    \/\/ Yan\u0131t\u0131n gelmesini bekleyin.\n    const response = await responsePromise;\n\n    \/\/ Yan\u0131t\u0131n i\u00e7eri\u011fini veya durumunu kontrol edebilirsiniz.\n    expect(response.status()).toBe(200);\n    const data = await response.json();\n    expect(data.length).toBeGreaterThan(0);\n    console.log(API'den gelen veri say\u0131s\u0131: ${{ data.length }}<\/code>);\n  });\n<\/pre>\n
    <\/code><\/p>\n
    Bu \u00f6rnekte, page.waitForResponse<\/code> \u00e7a\u011fr\u0131s\u0131, response.url().includes('\/api\/data')<\/code> ile URL'sinde \/api\/data<\/code> ge\u00e7en ve response.status() === 200<\/code> ile HTTP durum kodu 200 olan bir yan\u0131t\u0131 bekler. Bu yakla\u015f\u0131m, sadece URL'ye bakmak yerine, yan\u0131t\u0131n i\u00e7eri\u011fi veya durumu gibi daha derinlemesine ko\u015fullara g\u00f6re de bekleme yapabilmenizi sa\u011flar, bu da otomasyonlar\u0131n\u0131z\u0131 daha sa\u011flam ve hataya daha dayan\u0131kl\u0131 hale getirir.<\/p>\n
    Ger\u00e7ek D\u00fcnya Senaryolar\u0131nda waitForResponse Kullan\u0131m\u0131: Bir Vaka Analizi<\/h3>\n
    Bir e-ticaret sitesinde \u00fcr\u00fcn filtreleme i\u015flevi, waitForResponse<\/code> metodunun g\u00fcc\u00fcn\u00fc g\u00f6stermek i\u00e7in harika bir ger\u00e7ek d\u00fcnya senaryosudur. Genellikle, kullan\u0131c\u0131 bir kategori se\u00e7ti\u011finde veya bir filtre uygulad\u0131\u011f\u0131nda (\u00f6rne\u011fin, fiyata g\u00f6re, markaya g\u00f6re), taray\u0131c\u0131 arka planda bir API \u00e7a\u011fr\u0131s\u0131 yapar. Bu API \u00e7a\u011fr\u0131s\u0131, filtrelenmi\u015f \u00fcr\u00fcn listesini JSON format\u0131nda d\u00f6nd\u00fcr\u00fcr ve sayfa, bu veriyi kullanarak \u00fcr\u00fcnleri dinamik olarak g\u00fcnceller. E\u011fer otomasyon scriptiniz, filtreleme i\u015flemi tamamlanmadan \u00fcr\u00fcn say\u0131s\u0131n\u0131 saymaya veya yeni \u00fcr\u00fcnleri kontrol etmeye \u00e7al\u0131\u015f\u0131rsa, ya eski verilerle kar\u015f\u0131la\u015f\u0131r ya da bir elementin bulunamamas\u0131 hatas\u0131 al\u0131r. \u0130\u015fte bu noktada waitForResponse<\/code> devreye girer.<\/p>\n
    Senaryo:<\/strong> Bir e-ticaret sitesinde belirli bir \"Elektronik\" kategorisine gidip, ard\u0131ndan \"Fiyat: Y\u00fcksekten Al\u00e7a\u011fa\" filtresini uygulad\u0131ktan sonra, filtrelenmi\u015f \u00fcr\u00fcn listesinin ba\u015far\u0131yla y\u00fcklendi\u011fini ve en az bir \u00fcr\u00fcn\u00fcn g\u00f6sterildi\u011fini do\u011frulamak istiyoruz.<\/p>\n
    Ad\u0131m Ad\u0131m Uygulama:<\/strong><\/p>\n
      \n
    1. \n        Sayfaya Gitme:<\/strong> \u0130lk olarak, e-ticaret sitesinin ana sayfas\u0131na gidece\u011fiz.\n    <\/li>\n
    2. \n        Kategoriye Gitme:<\/strong> \"Elektronik\" kategorisine t\u0131klayarak ilgili sayfaya ula\u015faca\u011f\u0131z. Bu navigasyon s\u0131ras\u0131nda da bir API \u00e7a\u011fr\u0131s\u0131 tetiklenebilir, ancak biz as\u0131l filtreleme iste\u011fine odaklanaca\u011f\u0131z.\n    <\/li>\n
    3. \n        Filtreyi Uygulama ve Yan\u0131t\u0131 Bekleme:<\/strong> \"Fiyat: Y\u00fcksekten Al\u00e7a\u011fa\" filtresini se\u00e7ti\u011fimizde, sayfan\u0131n \u00fcr\u00fcnleri yeniden y\u00fcklemek i\u00e7in bir API \u00e7a\u011fr\u0131s\u0131 yapmas\u0131n\u0131 bekleyece\u011fiz. Bu API \u00e7a\u011fr\u0131s\u0131n\u0131n URL'si genellikle \"\/api\/products?category=electronics&sort=price_desc\" gibi bir yap\u0131da olacakt\u0131r. waitForResponse<\/code> metodunu kullanarak bu spesifik API yan\u0131t\u0131n\u0131n gelmesini bekleyece\u011fiz.\n    <\/li>\n
    4. \n        Gelen Veriyi Kontrol Etme:<\/strong> Yan\u0131t ba\u015far\u0131yla al\u0131nd\u0131\u011f\u0131nda, yan\u0131t\u0131n HTTP durum kodunu kontrol edip, i\u00e7eri\u011finin beklenen \u00fcr\u00fcn verilerini i\u00e7erdi\u011finden emin olabiliriz. Son olarak, sayfadaki \u00fcr\u00fcn listesinin g\u00fcncellendi\u011fini do\u011frulamak i\u00e7in, yeni filtreye g\u00f6re s\u0131ralanm\u0131\u015f \u00fcr\u00fcnlerin varl\u0131\u011f\u0131n\u0131 kontrol edece\u011fiz.\n    <\/li>\n<\/ol>\n
      A\u015fa\u011f\u0131daki kod \u00f6rne\u011fi, bu vaka analizini Playwright ile nas\u0131l uygulayaca\u011f\u0131m\u0131z\u0131 g\u00f6stermektedir:<\/p>\n
      \n  import {{ test, expect }} from '@playwright\/test';\n\n  test('E-ticaret sitesinde \u00fcr\u00fcn filtrelemesi sonras\u0131 API yan\u0131t\u0131n\u0131 do\u011frulamal\u0131', async ({{ page }}) => {\n    await page.goto('https:\/\/ecommerce.example.com'); \/\/ \u00d6rnek bir e-ticaret sitesi\n\n    \/\/ 1. \"Elektronik\" kategorisine t\u0131klay\u0131n\n    await page.locator('a:has-text(\"Elektronik\")').click();\n    await page.waitForLoadState('networkidle'); \/\/ Kategori sayfas\u0131 y\u00fcklendi\u011finden emin olun\n\n    \/\/ 2. Filtreleme API yan\u0131t\u0131n\u0131 beklemeye ba\u015flay\u0131n.\n    \/\/ Genellikle filtreleme sonras\u0131 \u00fcr\u00fcnleri \u00e7eken API'nin URL'si belirli bir desene sahiptir.\n    \/\/ \u00d6rne\u011fin, '\/api\/products' i\u00e7ermesi ve bir 'sort' parametresi olmas\u0131 gibi.\n    const filterResponsePromise = page.waitForResponse(response =>\n      response.url().includes('\/api\/products') && response.request().method() === 'GET' &&\n      response.url().includes('sort=price_desc') && response.status() === 200\n    );\n\n    \/\/ 3. \"Fiyat: Y\u00fcksekten Al\u00e7a\u011fa\" filtresini uygulay\u0131n.\n    \/\/ Bu bir dropdown, radio button veya link olabilir.\n    await page.selectOption('select#sort-by', 'price_desc'); \/\/ ID'si 'sort-by' olan bir select kutusu varsayal\u0131m\n\n    \/\/ 4. Filtreleme API yan\u0131t\u0131n\u0131n gelmesini bekleyin\n    const response = await filterResponsePromise;\n\n    \/\/ 5. Yan\u0131t\u0131n ba\u015far\u0131yla al\u0131nd\u0131\u011f\u0131n\u0131 ve i\u00e7eri\u011fini kontrol edin\n    expect(response.status()).toBe(200);\n    const productsData = await response.json();\n    expect(productsData).toBeInstanceOf(Array);\n    expect(productsData.length).toBeGreaterThan(0);\n    console.log(Filtrelenmi\u015f \u00fcr\u00fcn say\u0131s\u0131 (API'den): ${{ productsData.length }}<\/code>);\n\n    \/\/ 6. Sayfadaki \u00fcr\u00fcn listesinin g\u00fcncellendi\u011fini g\u00f6rsel olarak veya DOM \u00fczerinden do\u011frulay\u0131n.\n    \/\/ \u00d6rne\u011fin, ilk \u00fcr\u00fcn\u00fcn fiyat\u0131n\u0131n ger\u00e7ekten en y\u00fcksek oldu\u011funu kontrol edebiliriz.\n    const firstProductPriceText = await page.locator('.product-list .product-item:first-child .price').innerText();\n    const firstProductPrice = parseFloat(firstProductPriceText.replace(\/[^0-9.-]+\/g,\"\"));\n\n    \/\/ Beklenen \u00fcr\u00fcn fiyat\u0131n\u0131n y\u00fcksek oldu\u011funu varsay\u0131msal olarak kontrol edin.\n    \/\/ Ger\u00e7ek bir senaryoda, API yan\u0131t\u0131ndaki ilk \u00fcr\u00fcn\u00fcn fiyat\u0131 ile kar\u015f\u0131la\u015ft\u0131r\u0131rd\u0131k.\n    expect(firstProductPrice).toBeGreaterThan(500); \/\/ Varsay\u0131msal bir de\u011fer\n\n    \/\/ En az bir \u00fcr\u00fcn elementinin sayfada g\u00f6r\u00fcn\u00fcr oldu\u011funu kontrol edin\n    await expect(page.locator('.product-list .product-item')).toHaveCount(productsData.length);\n    console.log('Filtreleme ve do\u011frulama ba\u015far\u0131l\u0131.');\n  });\n<\/pre>\n
      <\/code><\/p>\n
      Bu vaka analizi, waitForResponse<\/code> metodunun sadece testlerin daha g\u00fcvenilir olmas\u0131n\u0131 sa\u011flamakla kalmay\u0131p, ayn\u0131 zamanda otomasyon ak\u0131\u015f\u0131n\u0131 ger\u00e7ek kullan\u0131c\u0131 deneyimiyle daha uyumlu hale getirdi\u011fini a\u00e7\u0131k\u00e7a g\u00f6stermektedir. Bu sayede, uygulaman\u0131n arka plan\u0131ndaki veri ak\u0131\u015f\u0131na ba\u011f\u0131ml\u0131 olan her t\u00fcrl\u00fc eylemi g\u00fcvenle otomatikle\u015ftirebiliriz.<\/p>\n
      waitForResponse ile Kar\u015f\u0131la\u015f\u0131labilecek Zorluklar ve \u00c7\u00f6z\u00fcmleri Nelerdir?<\/h2>\n
      waitForResponse<\/code> metodu ne kadar g\u00fc\u00e7l\u00fc olursa olsun, asenkron web d\u00fcnyas\u0131n\u0131n karma\u015f\u0131kl\u0131\u011f\u0131 bazen beklenmedik zorluklar ortaya \u00e7\u0131karabilir. Ancak bu zorluklar\u0131n \u00e7o\u011fu, do\u011fru yakla\u015f\u0131mlar ve Playwright'\u0131n sundu\u011fu esneklik ile kolayca a\u015f\u0131labilir. \u0130\u015fte s\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131lan baz\u0131 zorluklar ve bunlara y\u00f6nelik \u00e7\u00f6z\u00fcmler:<\/p>\n
      Zorluk 1: Yanl\u0131\u015f URL E\u015fle\u015fmesi veya Birden Fazla Benzer \u0130stek<\/h4>\n
      Bazen bekledi\u011finiz API iste\u011fi, ayn\u0131 URL yap\u0131s\u0131na sahip ba\u015fka, alakas\u0131z bir istekle kar\u0131\u015ft\u0131r\u0131labilir. Veya ayn\u0131 eylem birden fazla benzer API \u00e7a\u011fr\u0131s\u0131n\u0131 tetikleyebilir ve siz yanl\u0131\u015f olan\u0131 yakalamak isteyebilirsiniz.<\/p>\n
        \n
      • \n        \u00c7\u00f6z\u00fcm: Daha Spesifik Regex Kullan\u0131m\u0131:<\/strong> URL'yi tam e\u015fle\u015ftirmek yerine, sorgu parametrelerini de i\u00e7eren daha spesifik bir d\u00fczenli ifade (regex) kullanabilirsiniz. \u00d6rne\u011fin, \/api\/products\\\\?category=electronics.*<\/code> gibi.\n    <\/li>\n
      • \n        \u00c7\u00f6z\u00fcm: Predicate Fonksiyonu ile Payload\/Status Kontrol\u00fc:<\/strong> En g\u00fc\u00e7l\u00fc yakla\u015f\u0131m, bir predicate fonksiyonu kullanmakt\u0131r. Bu fonksiyon, yan\u0131t\u0131n URL'si, HTTP durumu, ba\u015fl\u0131klar\u0131 veya hatta yan\u0131t g\u00f6vdesinin kendisi gibi t\u00fcm detaylar\u0131na eri\u015fmenizi sa\u011flar. B\u00f6ylece, sadece do\u011fru URL'ye sahip de\u011fil, ayn\u0131 zamanda beklenen HTTP durum koduna (\u00f6rne\u011fin, 200 OK) sahip ve hatta belirli bir veri yap\u0131s\u0131n\u0131 i\u00e7eren yan\u0131t\u0131 bekleyebilirsiniz.\n    <\/li>\n<\/ul>\n
        \n  \/\/ \u00d6rnek: Sadece 200 OK d\u00f6nen ve belirli bir product ID i\u00e7eren yan\u0131t\u0131 bekleme\n  const specificProductResponse = await page.waitForResponse(async response => {\n    return response.url().includes('\/api\/products\/') &&\n           response.status() === 200 &&\n           (await response.json()).data.id === 'expectedProductId123';\n  });\n<\/pre>\n
        <\/code><\/p>\n
        Zorluk 2: Zaman A\u015f\u0131m\u0131 (Timeout) Sorunlar\u0131<\/h4>\n
        A\u011f ko\u015fullar\u0131 veya sunucu gecikmeleri nedeniyle bir API yan\u0131t\u0131n\u0131n beklenenden daha uzun s\u00fcrmesi, waitForResponse<\/code> metodunun zaman a\u015f\u0131m\u0131na u\u011framas\u0131na neden olabilir.<\/p>\n
          \n
        • \n        \u00c7\u00f6z\u00fcm: timeout<\/code> Parametresini Ayarlama:<\/strong> Playwright'\u0131n varsay\u0131lan zaman a\u015f\u0131m\u0131 genellikle 30 saniyedir. E\u011fer belirli bir i\u015flem daha uzun s\u00fcrebiliyorsa, waitForResponse<\/code>'a daha uzun bir timeout<\/code> de\u011feri ge\u00e7irebilirsiniz. Ancak, bu de\u011feri gereksiz yere art\u0131rmamak \u00f6nemlidir, aksi takdirde testleriniz yava\u015flar.\n    <\/li>\n
        • \n        \u00c7\u00f6z\u00fcm: Retry Mekanizmalar\u0131:<\/strong> Zaman zaman meydana gelen a\u011f dalgalanmalar\u0131 i\u00e7in, test \u00e7at\u0131n\u0131z\u0131n veya \u00f6zel bir util fonksiyonun par\u00e7as\u0131 olarak waitForResponse<\/code> \u00e7a\u011fr\u0131s\u0131n\u0131 belirli say\u0131da tekrar deneme (retry) mekanizmas\u0131 i\u00e7ine alabilirsiniz.\n    <\/li>\n<\/ul>\n
          \n  \/\/ \u00d6rnek: Zaman a\u015f\u0131m\u0131n\u0131 60 saniyeye \u00e7\u0131karma\n  const longResponse = await page.waitForResponse(\n    '**\/api\/long-running-task',\n    {{ timeout: 60000 }} \/\/ 60 saniye\n  );\n<\/pre>\n
          <\/code><\/p>\n
          Zorluk 3: \u0130steklerin S\u0131ras\u0131 ve Dinamik URL'ler<\/h4>\n
          Baz\u0131 durumlarda, ayn\u0131 eylem birden fazla API iste\u011fini tetikler ve bu isteklerin s\u0131ras\u0131 de\u011fi\u015febilir. Veya URL'ler, oturum ID'leri veya di\u011fer dinamik parametreler i\u00e7erdi\u011finden, her zaman ayn\u0131 kalmayabilir.<\/p>\n
            \n
          • \n        \u00c7\u00f6z\u00fcm: Promise.all<\/code> ile Birden Fazla \u0130ste\u011fi Bekleme:<\/strong> E\u011fer bir eylem birden fazla farkl\u0131 API yan\u0131t\u0131n\u0131 tetikliyorsa ve bunlar\u0131n hepsinin tamamland\u0131\u011f\u0131ndan emin olmak istiyorsan\u0131z, Promise.all<\/code> ile birden fazla waitForResponse<\/code> \u00e7a\u011fr\u0131s\u0131n\u0131 paralel olarak bekleyebilirsiniz.\n    <\/li>\n
          • \n        \u00c7\u00f6z\u00fcm: URL'nin Sadece De\u011fi\u015fmeyen K\u0131sm\u0131n\u0131 Kullanma:<\/strong> Dinamik URL'ler i\u00e7in, URL'nin sabit kalan k\u0131sm\u0131n\u0131 veya bir regex kullanarak dinamik k\u0131s\u0131mlar\u0131 e\u015fle\u015ftirmeyebilirsiniz. \u00d6rne\u011fin, \/api\/users\/[0-9]+\/details<\/code> yerine sadece \/api\/users\/<\/code> ile ba\u015flayan t\u00fcm istekleri yakalay\u0131p predicate fonksiyonu ile i\u00e7indeki veriye bakabilirsiniz.\n    <\/li>\n
          • \n        \u00c7\u00f6z\u00fcm: Global page.on('response')<\/code> ile Daha Esnek Yakalama:<\/strong> \u00c7ok karma\u015f\u0131k senaryolarda, waitForResponse<\/code> bir eylemi tetiklemeden \u00f6nce bir Promise olu\u015fturman\u0131z\u0131 gerektirirken, page.on('response')<\/code> olay\u0131yla daha reaktif bir yakla\u015f\u0131m sergileyebilirsiniz. Bu, belirli bir ko\u015fulu kar\u015f\u0131layan *her* yan\u0131t\u0131 dinlemenizi sa\u011flar. Ancak bu genellikle daha d\u00fc\u015f\u00fck seviyeli bir yakla\u015f\u0131md\u0131r ve dikkatli kullan\u0131lmal\u0131d\u0131r.\n    <\/li>\n<\/ul>\n
            \n  Uzman \u0130pucu: Kar\u015f\u0131la\u015ft\u0131\u011f\u0131n\u0131z \u00e7o\u011fu zorlukta, waitForResponse<\/code> metodunun predicate fonksiyonu parametresi en g\u00fc\u00e7l\u00fc \u00e7\u00f6z\u00fcm orta\u011f\u0131n\u0131z olacakt\u0131r. Yan\u0131t\u0131n URL'si, durumu, ba\u015fl\u0131klar\u0131 ve hatta g\u00f6vdesini (e\u011fer JSON veya metin tabanl\u0131ysa) kullanarak \u00e7ok spesifik ko\u015fullar tan\u0131mlayabilirsiniz. Bu, otomasyonlar\u0131n\u0131z\u0131n hem g\u00fcvenilirli\u011fini hem de esnekli\u011fini dramatik bir \u015fekilde art\u0131r\u0131r.\n<\/div>\n
            Bu \u00e7\u00f6z\u00fcmler, waitForResponse<\/code>'un potansiyel tuzaklar\u0131ndan ka\u00e7\u0131nman\u0131za ve Playwright otomasyonlar\u0131n\u0131z\u0131 daha sa\u011flam ve \u00f6ng\u00f6r\u00fclebilir hale getirmenize yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n
            \u0130leri D\u00fczey waitForResponse Teknikleri: Performans ve G\u00fcvenilirlik \u0130\u00e7in \u0130pu\u00e7lar\u0131<\/h3>\n
            waitForResponse<\/code> metodunun temel kullan\u0131mlar\u0131n\u0131 anlad\u0131ktan sonra, otomasyonlar\u0131n\u0131z\u0131 bir \u00fcst seviyeye ta\u015f\u0131mak i\u00e7in baz\u0131 ileri d\u00fczey tekniklere ve ipu\u00e7lar\u0131na g\u00f6z atal\u0131m. Bu teknikler, testlerinizin veya scraping scriptlerinizin performans\u0131n\u0131 art\u0131r\u0131rken ayn\u0131 zamanda hata tolerans\u0131n\u0131 ve g\u00fcvenilirli\u011fini de y\u00fckseltecektir.<\/p>\n
            Predicate Fonksiyonunun G\u00fcc\u00fc: Sadece URL De\u011fil, Yan\u0131t\u0131n Kendisi \u00dczerinden Filtreleme<\/h4>\n
            Daha \u00f6nce de de\u011findi\u011fimiz gibi, waitForResponse<\/code> metoduna ge\u00e7irilen predicate fonksiyonu, basit URL e\u015fle\u015ftirmesinin \u00f6tesine ge\u00e7erek yan\u0131t\u0131n t\u00fcm \u00f6zelliklerini incelemenizi sa\u011flar. Bu, \u00f6zellikle ayn\u0131 URL'ye sahip ancak farkl\u0131 i\u00e7erik veya durum kodlar\u0131 d\u00f6nen yan\u0131tlar aras\u0131nda ayr\u0131m yapman\u0131z gerekti\u011finde kritik \u00f6neme sahiptir.<\/p>\n
              \n
            • \n        HTTP Durum Koduna G\u00f6re Filtreleme:<\/strong> Sadece ba\u015far\u0131l\u0131 (200 OK) yan\u0131tlar\u0131 beklemek i\u00e7in response.status() === 200<\/code> ko\u015fulunu ekleyebilirsiniz.\n    <\/li>\n
            • \n        Yan\u0131t Ba\u015fl\u0131klar\u0131na G\u00f6re Filtreleme:<\/strong> Belirli bir Content-Type<\/code> veya \u00f6zel bir API ba\u015fl\u0131\u011f\u0131 (X-Request-ID<\/code> gibi) i\u00e7eren yan\u0131tlar\u0131 bekleyebilirsiniz: response.headers()['content-type'].includes('application\/json')<\/code>.\n    <\/li>\n
            • \n        Yan\u0131t G\u00f6vdesine G\u00f6re Filtreleme:<\/strong> En g\u00fc\u00e7l\u00fc yakla\u015f\u0131mlardan biri, yan\u0131t\u0131n g\u00f6vdesini incelemektir. \u00d6zellikle JSON tabanl\u0131 API'ler i\u00e7in, yan\u0131t\u0131n i\u00e7indeki belirli bir alan\u0131n varl\u0131\u011f\u0131n\u0131 veya de\u011ferini kontrol edebilirsiniz. Ancak bu, yan\u0131t g\u00f6vdesinin tamam\u0131n\u0131n okunmas\u0131n\u0131 gerektirdi\u011finden, performans\u0131 d\u00fc\u015f\u00fcrebilir ve yaln\u0131zca ger\u00e7ekten gerekti\u011finde kullan\u0131lmal\u0131d\u0131r. await response.json()<\/code> veya await response.text()<\/code> kullan\u0131rken async<\/code> anahtar kelimesini predicate fonksiyonunuzda kullanmay\u0131 unutmay\u0131n.\n    <\/li>\n<\/ul>\n
              \n  \/\/ \u00d6rnek: Sadece 'application\/json' Content-Type'\u0131na sahip ve belirli bir veri i\u00e7eren yan\u0131t\u0131 bekleme\n  const jsonResponseWithSpecificData = await page.waitForResponse(async response => {\n    if (response.url().includes('\/api\/items') && response.request().method() === 'POST') {\n      const headers = response.headers();\n      if (headers['content-type'] && headers['content-type'].includes('application\/json')) {\n        const body = await response.json();\n        return body && body.status === 'success' && body.id; \/\/ Yan\u0131t g\u00f6vdesinde 'status' ve 'id' kontrol\u00fc\n      }\n    }\n    return false;\n  });\n<\/pre>\n
              <\/code><\/p>\n
              Birden Fazla \u0130ste\u011fi Ayn\u0131 Anda Bekleme: Promise.all<\/code> ile<\/h4>\n
              Bir kullan\u0131c\u0131 eylemi bazen birden fazla ba\u011f\u0131ms\u0131z API \u00e7a\u011fr\u0131s\u0131n\u0131 tetikleyebilir. \u00d6rne\u011fin, bir \u00fcr\u00fcn sayfas\u0131n\u0131n y\u00fcklenmesi hem \u00fcr\u00fcn detaylar\u0131 API'sini hem de ilgili \u00fcr\u00fcnler API'sini \u00e7a\u011f\u0131rabilir. Bu durumda, her iki yan\u0131t\u0131n da geldi\u011finden emin olmak isteyebilirsiniz. Promise.all<\/code> ile birden fazla waitForResponse<\/code> promise'\u0131n\u0131 ayn\u0131 anda bekleyebilirsiniz.<\/p>\n
              \n  \/\/ \u00d6rnek: Ayn\u0131 anda iki farkl\u0131 API yan\u0131t\u0131n\u0131 bekleme\n  const [productDetailsResponse, relatedProductsResponse] = await Promise.all([\n    page.waitForResponse(response => response.url().includes('\/api\/product-details')),\n    page.waitForResponse(response => response.url().includes('\/api\/related-products'))\n  ]);\n\n  expect(productDetailsResponse.status()).toBe(200);\n  expect(relatedProductsResponse.status()).toBe(200);\n<\/pre>\n
              <\/code><\/p>\n
              \u0130stek ve Yan\u0131t Yakalama Aras\u0131ndaki Farklar: waitForRequest<\/code> vs waitForResponse<\/code><\/h4>\n
              Playwright, a\u011f trafi\u011fini yakalamak i\u00e7in waitForRequest<\/code> ve waitForResponse<\/code> olmak \u00fczere iki ana metod sunar.<\/p>\n
                \n
              • \n        waitForRequest<\/code> (\u0130stek Bekleme):<\/strong> Taray\u0131c\u0131n\u0131n belirli bir URL'ye istek g\u00f6ndermesini bekler. Bu, iste\u011fin g\u00f6nderildi\u011fini ancak hen\u00fcz bir yan\u0131t gelmedi\u011fini do\u011frulamak istedi\u011finizde kullan\u0131\u015fl\u0131d\u0131r. \u00d6zellikle, bir iste\u011fin hi\u00e7 g\u00f6nderilip g\u00f6nderilmedi\u011fini veya do\u011fru parametrelerle g\u00f6nderilip g\u00f6nderilmedi\u011fini kontrol etmek i\u00e7in idealdir.\n    <\/li>\n
              • \n        waitForResponse<\/code> (Yan\u0131t Bekleme):<\/strong> Belirli bir iste\u011fe ait yan\u0131t\u0131n taray\u0131c\u0131ya ula\u015fmas\u0131n\u0131 bekler. Bu, iste\u011fin tamamland\u0131\u011f\u0131n\u0131 ve bir sunucu yan\u0131t\u0131n\u0131n al\u0131nd\u0131\u011f\u0131n\u0131 do\u011frulamak istedi\u011finizde kullan\u0131l\u0131r. \u00c7o\u011fu zaman, uygulaman\u0131n durumunun veya i\u00e7eri\u011finin de\u011fi\u015fti\u011fi asenkron i\u015flemler i\u00e7in bu metot daha uygundur.\n    <\/li>\n<\/ul>\n
                Genel kural olarak, e\u011fer bir eylemin belirli bir API \u00e7a\u011fr\u0131s\u0131n\u0131 tetikledi\u011finden emin olmak istiyorsan\u0131z waitForRequest<\/code>'i, ancak bu API \u00e7a\u011fr\u0131s\u0131n\u0131n ba\u015far\u0131l\u0131 bir \u015fekilde tamamland\u0131\u011f\u0131ndan ve sayfan\u0131n g\u00fcncellendi\u011finden emin olmak istiyorsan\u0131z waitForResponse<\/code>'u tercih edin.<\/p>\n
                Mocklama ve Manip\u00fclasyon: page.route<\/code> ile Birle\u015ftirerek Yan\u0131tlar\u0131 Taklit Etme<\/h4>\n
                waitForResponse<\/code> metodunu page.route<\/code> ile birle\u015ftirmek, ileri d\u00fczey test senaryolar\u0131 ve hata sim\u00fclasyonlar\u0131 i\u00e7in inan\u0131lmaz derecede g\u00fc\u00e7l\u00fc bir kombinasyondur. page.route<\/code> ile belirli bir URL'ye yap\u0131lan istekleri kesebilir ve kendi taklit (mock) yan\u0131tlar\u0131n\u0131z\u0131 d\u00f6nd\u00fcrebilirsiniz. Bu, Playwright test ortam\u0131nda sunucu taraf\u0131ndaki davran\u0131\u015flar\u0131 sim\u00fcle etmenizi sa\u011flar.<\/p>\n
                \n  \/\/ \u00d6rnek: Bir API yan\u0131t\u0131n\u0131 mock'layarak hata durumunu test etme\n  test('API hatas\u0131 durumunda hata mesaj\u0131n\u0131 g\u00f6stermeli', async ({{ page }}) => {\n    \/\/ '\/api\/user-profile' isteklerini kes ve 500 status code ile bo\u015f bir yan\u0131t d\u00f6nd\u00fcr.\n    await page.route('**\/api\/user-profile', async route => {\n      await route.fulfill({\n        status: 500,\n        contentType: 'application\/json',\n        body: JSON.stringify({ error: 'Internal Server Error' })\n      });\n    });\n\n    \/\/ Kullan\u0131c\u0131n\u0131n profil sayfas\u0131na gitmesini tetikleyecek bir eylem\n    await page.goto('https:\/\/example.com\/profile');\n\n    \/\/ Hata API yan\u0131t\u0131n\u0131 bekle\n    const errorResponse = await page.waitForResponse(response =>\n      response.url().includes('\/api\/user-profile') && response.status() === 500\n    );\n\n    expect(errorResponse.status()).toBe(500);\n    \/\/ Hata mesaj\u0131n\u0131n sayfada g\u00f6r\u00fcn\u00fcr oldu\u011funu do\u011frula\n    await expect(page.locator('text=Profil y\u00fcklenemedi')).toBeVisible();\n  });\n<\/pre>\n
                <\/code>
                \nBu ileri d\u00fczey teknikler, Playwright otomasyonlar\u0131n\u0131z\u0131n hem daha sa\u011flam hem de daha esnek olmas\u0131n\u0131 sa\u011flar. Uygulamalar\u0131n\u0131z\u0131n karma\u015f\u0131kl\u0131\u011f\u0131 artt\u0131k\u00e7a, bu ara\u00e7lar\u0131 etkin bir \u015fekilde kullanmak, test s\u00fcrenizi ve hata ay\u0131klama \u00e7aban\u0131z\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde azaltacakt\u0131r.<\/p>\n
                Mobil Uyumlu Testler ve waitForResponse: Nas\u0131l Yap\u0131l\u0131r?<\/h2>\n
                G\u00fcn\u00fcm\u00fczde web sitelerinin b\u00fcy\u00fck bir \u00e7o\u011funlu\u011fu, farkl\u0131 cihaz boyutlar\u0131na ve ekran \u00e7\u00f6z\u00fcn\u00fcrl\u00fcklerine uyum sa\u011flayabilen mobil uyumlu (responsive) tasar\u0131mlara sahiptir. Bu durum, otomasyon testlerinde ek bir boyut getirir: bir web uygulamas\u0131n\u0131n yaln\u0131zca masa\u00fcst\u00fc g\u00f6r\u00fcn\u00fcm\u00fcnde de\u011fil, mobil cihazlarda da beklendi\u011fi gibi \u00e7al\u0131\u015ft\u0131\u011f\u0131ndan emin olmak. Playwright, bu ihtiyac\u0131 kar\u015f\u0131lamak i\u00e7in g\u00fc\u00e7l\u00fc cihaz em\u00fclasyon yetenekleri sunar ve waitForResponse<\/code> metodu, mobil uyumlu testlerde de kritik bir rol oynar.<\/p>\n
                Playwright ile mobil uyumlu testler yaparken, page.setViewportSize()<\/code> veya browser.newContext()<\/code> metodu ile \u00f6nceden tan\u0131mlanm\u0131\u015f cihaz presetlerini (\u00f6rne\u011fin, devices['iPhone 11']<\/code>) kullanarak farkl\u0131 ekran boyutlar\u0131n\u0131 ve kullan\u0131c\u0131 arac\u0131s\u0131 (user-agent) dizelerini taklit edebilirsiniz. Bu em\u00fclasyonlar, sayfan\u0131n CSS medya sorgular\u0131n\u0131 (media queries) tetiklemesini ve mobil cihazlara \u00f6zg\u00fc d\u00fczenleri, etkile\u015fimleri ve bazen de farkl\u0131 a\u011f isteklerini tetiklemesini sa\u011flar.<\/p>\n
                Peki, waitForResponse<\/code> mobil uyumlu testlerde nas\u0131l bir fark yarat\u0131r?<\/p>\n
                  \n
                • \n        Farkl\u0131 A\u011f Davran\u0131\u015flar\u0131:<\/strong> Baz\u0131 web siteleri, mobil cihazlardan eri\u015fildi\u011finde farkl\u0131 API u\u00e7 noktalar\u0131na veya farkl\u0131 veri formatlar\u0131na sahip API'lere istek g\u00f6nderebilir. \u00d6rne\u011fin, daha az veri i\u00e7eren veya mobil cihazlara \u00f6zel optimize edilmi\u015f bir API'den veri \u00e7ekebilirler. waitForResponse<\/code> kullanarak, bu mobil \u00f6zel API isteklerinin do\u011fru bir \u015fekilde tetiklendi\u011fini ve yan\u0131tland\u0131\u011f\u0131n\u0131 do\u011frulayabilirsiniz.\n    <\/li>\n
                • \n        Performans Kontrol\u00fc:<\/strong> Mobil a\u011f ko\u015fullar\u0131 genellikle masa\u00fcst\u00fc fiber internet kadar h\u0131zl\u0131 de\u011fildir. waitForResponse<\/code> ile belirli API yan\u0131tlar\u0131n\u0131n mobil ortamda da kabul edilebilir s\u00fcrelerde tamamland\u0131\u011f\u0131n\u0131 test edebilirsiniz. Uzun s\u00fcren yan\u0131tlar i\u00e7in zaman a\u015f\u0131m\u0131 de\u011ferlerini mobil test senaryolar\u0131na \u00f6zel olarak ayarlamak gerekebilir.\n    <\/li>\n
                • \n        Medya Sorgular\u0131 ve \u0130\u00e7erik Y\u00fcklemesi:<\/strong> Mobil cihazlarda, baz\u0131 i\u00e7erikler sadece belirli bir viewport boyutunda y\u00fcklenirken, baz\u0131lar\u0131 hi\u00e7 y\u00fcklenmeyebilir veya farkl\u0131 kaynaklardan y\u00fcklenebilir. waitForResponse<\/code> ile bu dinamik y\u00fcklemelerin do\u011frulu\u011funu ve zamanlamas\u0131n\u0131 kontrol edebilirsiniz.\n    <\/li>\n<\/ul>\n
                  \u00d6rnek Senaryo:<\/strong> Bir e-ticaret sitesinin \u00fcr\u00fcn detay sayfas\u0131, mobil g\u00f6r\u00fcn\u00fcmde, daha k\u00fc\u00e7\u00fck resim \u00e7\u00f6z\u00fcn\u00fcrl\u00fckleri i\u00e7in farkl\u0131 bir API u\u00e7 noktas\u0131 kullan\u0131yor olabilir. Ayr\u0131ca, mobil g\u00f6r\u00fcn\u00fcmde \"Benzer \u00dcr\u00fcnler\" b\u00f6l\u00fcm\u00fc yaln\u0131zca kullan\u0131c\u0131 sayfan\u0131n sonuna kayd\u0131rd\u0131\u011f\u0131nda y\u00fckleniyor olabilir. waitForResponse<\/code> ile bu mobil \u00f6zel davran\u0131\u015flar\u0131 test edebiliriz.<\/p>\n
                  \n  import {{ test, expect, devices }} from '@playwright\/test';\n\n  test('Mobil g\u00f6r\u00fcn\u00fcmde \u00fcr\u00fcn detay sayfas\u0131n\u0131n API \u00e7a\u011fr\u0131lar\u0131n\u0131 kontrol etmeli', async ({{ page }}) => {\n    \/\/ Bir iPhone 13 Pro Max em\u00fclasyonu ba\u015flat\n    const mobilePage = await page.context().newPage({{ ...devices['iPhone 13 Pro Max'] }});\n\n    \/\/ Mobil \u00f6zel resim API yan\u0131t\u0131n\u0131 beklemeye ba\u015fla\n    const mobileImageApiResponsePromise = mobilePage.waitForResponse(response =>\n      response.url().includes('\/api\/mobile-images') && response.status() === 200\n    );\n\n    \/\/ \u00dcr\u00fcn detay sayfas\u0131na git\n    await mobilePage.goto('https:\/\/example.com\/product\/awesome-phone-1');\n\n    \/\/ API yan\u0131t\u0131n\u0131n gelmesini bekle\n    const mobileImageApiResponse = await mobileImageApiResponsePromise;\n    expect(mobileImageApiResponse.status()).toBe(200);\n    const imageData = await mobileImageApiResponse.json();\n    expect(imageData.resolution).toBe('mobile'); \/\/ API'den gelen verinin mobil \u00e7\u00f6z\u00fcn\u00fcrl\u00fckte oldu\u011funu do\u011frula\n\n    \/\/ Sayfay\u0131 a\u015fa\u011f\u0131 kayd\u0131rarak 'Benzer \u00dcr\u00fcnler' b\u00f6l\u00fcm\u00fcn\u00fc tetikle\n    await mobilePage.evaluate(() => window.scrollTo(0, document.body.scrollHeight));\n\n    \/\/ 'Benzer \u00dcr\u00fcnler' API yan\u0131t\u0131n\u0131 bekle\n    const relatedProductsApiResponsePromise = mobilePage.waitForResponse(response =>\n      response.url().includes('\/api\/related-products-mobile') && response.status() === 200\n    );\n\n    const relatedProductsApiResponse = await relatedProductsApiResponsePromise;\n    expect(relatedProductsApiResponse.status()).toBe(200);\n    const relatedProducts = await relatedProductsApiResponse.json();\n    expect(relatedProducts.length).toBeGreaterThan(0);\n\n    \/\/ Mobil g\u00f6r\u00fcn\u00fcmde ilgili \u00fcr\u00fcnlerin sayfada y\u00fcklendi\u011fini kontrol et\n    await expect(mobilePage.locator('.related-products-section .product-item')).toBeVisible();\n    console.log('Mobil uyumlu API yan\u0131tlar\u0131 ba\u015far\u0131yla do\u011fruland\u0131.');\n  });\n<\/pre>\n
                  <\/code><\/p>\n
                  Playwright'\u0131n em\u00fclasyon yetenekleri sayesinde, ger\u00e7ek bir mobil cihaz kullanmadan mobil davran\u0131\u015flar\u0131 test edebiliriz. waitForResponse<\/code> ise bu em\u00fclasyon ortam\u0131nda a\u011f isteklerinin do\u011frulu\u011funu ve zamanlamas\u0131n\u0131 garanti etmemize yard\u0131mc\u0131 olur.<\/p>\n
                  CSS Media Query \u00d6rne\u011fi:<\/strong>
                  \nBir web sayfas\u0131nda mobil uyumlulu\u011fun temelini olu\u015fturan CSS medya sorgular\u0131, waitForResponse<\/code> ile do\u011frudan ili\u015fkili olmasa da, mobil test senaryolar\u0131n\u0131n ba\u011flam\u0131n\u0131 olu\u015fturur. \u0130\u015fte basit bir \u00f6rnek:<\/p>\n
                  \n