Mobil emülasyon

Chrome, Chrome Geliştirici Araçları ile cihaz modunu etkinleştirerek kullanıcıların Chrome'u masaüstü sürümünden mobil cihazda taklit etmesine olanak tanır. Bu özellik, web geliştirme sürecini hızlandırır ve geliştiricilerin gerçek bir cihaza ihtiyaç duymadan bir web sitesinin mobil cihazlarda nasıl oluşturulduğunu hızlıca test etmelerini sağlar. ChromeDriver, sözlük değeriyle belirtilen "mobileEmulation" özelliğine sahip cihazları da taklit edebilir.

DevTools'ta olduğu gibi, ChromeDriver'da da mobil emülasyonu etkinleştirmenin iki yolu vardır:

  • Bilinen bir cihazı belirtme
  • Cihaz özelliklerini tek tek belirtme

"mobileEmulation" sözlüğünün biçimi, hangi yönteme ihtiyaç duyulduğuna bağlıdır.

Bilinen bir mobil cihazı belirtme

Belirli bir cihazla cihaz emülasyonunu etkinleştirmek için "mobileEmulation" sözlüğünde "deviceName" bulunmalıdır. "deviceName" için değer olarak DevTools taklit cihaz ayarlarından geçerli bir cihaz adı kullanın.

Cihazlar ayarının ekran görüntüsü

Java

Map<String, String> mobileEmulation = new HashMap<>();
mobileEmulation.put("deviceName", "Nexus 5");
ChromeOptions chromeOptions = new ChromeOptions();
chromeOptions.setExperimentalOption("mobileEmulation", mobileEmulation);
WebDriver driver = new ChromeDriver(chromeOptions);

Ruby

mobile_emulation = { "deviceName" => "Nexus 5" }
caps = Selenium::WebDriver::Remote::Capabilities.chrome(
   "chromeOptions" => { "mobileEmulation" => mobile_emulation })
driver = Selenium::WebDriver.for :remote, url: 'http://localhost:4444/wd/hub',
desired_capabilities: caps

Python

from selenium import webdriver
mobile_emulation = { "deviceName": "Nexus 5" }
chrome_options = webdriver.ChromeOptions()
chrome_options.add_experimental_option("mobileEmulation", mobile_emulation)
driver = webdriver.Remote(command_executor='http://127.0.0.1:4444/wd/hub',
desired_capabilities = chrome_options.to_capabilities())

Bilinen cihazların kaynağı

Bilinen cihazların listesi, Geliştirici Araçları Emülasyon panelinden oluşturulur. Ancak ChromeDriver'ın farklı bir sürümünü, Chrome'un daha yeni veya daha eski bir cihaz listesine sahip bir sürümüyle kullanabilirsiniz.

ChromeDriver'ın tanımadığı bir cihaz adını denerseniz "<your device name> geçerli bir cihaz olmalıdır." hatası alırsınız. ChromeDriver'ın bilmediği bir cihazı taklit etmek için ayrı cihaz metriklerini kullanarak Mobil Emülasyon'u etkinleştirin.

Cihaz özelliklerini tek tek belirtme

Özellikleri tek tek belirterek mobil emülasyonu etkinleştirebilirsiniz. "mobileEmulation" sözlüğü deviceMetrics, clientHints sözlükleri ve bir userAgent dizesi içerebilir.

"deviceMetrics" sözlüğünde aşağıdaki cihaz metrikleri belirtilmelidir:

  • "width": Cihaz ekranının piksel cinsinden genişliği
  • "height": Cihaz ekranının piksel cinsinden yüksekliği
  • "pixelRatio": Cihazın piksel oranı
  • "touch": Dokunma etkinliklerinin taklit edilip edilmeyeceğini belirtir. Değer varsayılan olarak doğrudur ve genellikle atlanabilir.
  • "mobile": Tarayıcının mobil kullanıcı aracısı gibi davranması gerekip gerekmediği (kaydırma çubuklarını yer paylaşımı, yön etkinlikleri yayınlama, içeriği görüntü alanına sığacak şekilde küçültme vb.). Değer varsayılan olarak doğrudur ve genellikle atlanabilir.

"clientHints" sözlüğünde aşağıdaki girişler bulunabilir:

  • "platform": İşletim sistemi. Belirli bir platformda çalışan Chrome tarafından döndürülen değerle tam olarak eşleşen bilinen bir değer ("Android", "Chrome OS", "Chromium OS", "Fuchsia", "Linux", "macOS", "Windows") veya kullanıcı tanımlı bir değer olabilir. Bu değer zorunludur.
  • "mobile": Tarayıcının mobil mi yoksa masaüstü mü kaynak sürümü istemesi gerektiğini belirtir. Android yüklü bir cep telefonunda çalışan Chrome genellikle bu değeri true olarak ayarlar. Android tablet cihazdaki Chrome bu değeri false olarak ayarlar. Masaüstü cihazlardaki Chrome da bu değeri false olarak ayarlar. Gerçekçi bir emülasyon belirtmek için bu bilgileri kullanabilirsiniz. Bu değer zorunludur.
  • Kalan girişler isteğe bağlıdır ve testle alakalı olmadıkları sürece atlanabilir:
    • "brands": Marka / büyük sürüm çiftlerinin listesi. Atlanırsa tarayıcı kendi değerlerini kullanır.
    • "fullVersionList": marka / sürüm çiftlerinin listesi. Tarayıcı kendi değerlerini kullanır.
    • "platformVersion": OS sürümü. Varsayılan olarak boş dizedir.
    • "model": cihaz modeli. Varsayılan olarak boş dizedir.
    • "architecture": CPU mimarisi. Bilinen değerler "x86" ve "arm"dır. Kullanıcı herhangi bir dize değeri sağlayabilir. Varsayılan olarak boş dizedir.
    • "bitlik": platform bitliği. Bilinen değerler "32" ve "64"tür. Kullanıcı herhangi bir dize değeri sağlayabilir. Varsayılan olarak boş dizedir.
    • "wow64": Windows 64'te Windows 32 emülasyonu. Varsayılan olarak yanlış olan bir boole değeri.

ChromeDriver, aşağıdaki platformlarda "clientHints" değerinden "userAgent" değerini tahmin edebilir: "Android", "Chrome OS", "Chromium OS", "Fuchsia", "Linux", "macOS", "Windows". Bu nedenle bu değer atlanabilir.

"clientHints" sözlüğü atlanırsa (eski mod) ChromeDriver, "clientHints" değerini "userAgent" değerinden tahmin etmek için elinden geleni yapar. "userAgent" değer biçimindeki dahili belirsizlikler nedeniyle bu özellik güvenilir değildir.

Mobil Emülasyon panelinde bulunan telefon ve tabletler DevTools kaynak kodunda bulunabilir.

Java

Map<String, Object> deviceMetrics = new HashMap<>();
deviceMetrics.put("width", 360);
deviceMetrics.put("height", 640);
deviceMetrics.put("pixelRatio", 3.0);
Map<String, Object> mobileEmulation = new HashMap<>();
mobileEmulation.put("deviceMetrics", deviceMetrics);
mobileEmulation.put("userAgent", "Mozilla/5.0 (Linux; Android 4.2.1; en-us; Nexus 5 Build/JOP40D) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19");
Map<String, Object> clientHints = new HashMap<>();
clientHints.put("platform", "Android");
clientHints.put("mobile", true);
mobileEmulation.put("clientHints", clientHints);
ChromeOptions chromeOptions = new ChromeOptions(); chromeOptions.setExperimentalOption("mobileEmulation", mobileEmulation); WebDriver driver = new ChromeDriver(chromeOptions);

Ruby

mobile_emulation = {
   "deviceMetrics" => { "width" => 360, "height" => 640, "pixelRatio" => 3.0 },
   "userAgent" => "Mozilla/5.0 (Linux; Android 4.2.1; en-us; Nexus 5 Build/JOP40D) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19",
   "clientHints" => { "platform" => "Android", "mobile" => true}
}
caps = Selenium::WebDriver::Remote::Capabilities.chrome("chromeOptions" => mobile_emulation)
driver = Selenium::WebDriver.for :remote, url: 'http://localhost:4444/wd/hub', desired_capabilities: caps

Python

from selenium import webdriver
from selenium.webdriver.chrome.options import Options
mobile_emulation = {
   "deviceMetrics": { "width": 360, "height": 640, "pixelRatio": 3.0 },
   "userAgent": "Mozilla/5.0 (Linux; Android 4.2.1; en-us; Nexus 5 Build/JOP40D) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19",
   "clientHints": {"platform": "Android", "mobile": True} }
chrome_options = Options()
chrome_options.add_experimental_option("mobileEmulation", mobile_emulation)
driver = webdriver.Chrome(chrome_options = chrome_options)

JSON

Tam mobil emülasyon yapılandırması örneği:

"mobileEmulation": {
  "userAgent": "Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/111.0.0.0 Mobile Safari/537.36",
  "deviceMetrics": {
     "mobile": true,
     "touch": true,
     "width": 412,
     "height": 823,
     "pixelRatio": 1.75
  },
  "clientHints": {
     "brands": [
        {"brand": "Google Chrome", "version": "111"},
        {"brand": "Chromium", "version": "111"}
     ],
     "fullVersionList": [
        {"brand": "Google Chrome", "version": "111.0.5563.64"},
        {"brand": "Chromium", "version": "111.0.5563.64"}
     ],
     "platform": "Android",
     "platformVersion": "11",
     "architecture": "arm",
     "model": "lorem ipsum (2022)"
     "mobile": true,
     "bitness": "32",
     "wow64": false
  }
}

Mobil emülasyon ve gerçek cihazlar

Web sitelerini masaüstünde mobil emülasyonla test etmek faydalıdır ancak gerçek cihazda yapılan testin mükemmel bir kopyası değildir. Aşağıdakiler gibi bazı önemli farklar vardır:

  • Mobil cihazlarda genellikle farklı bir GPU bulunur. Bu durum, performansta büyük değişikliklere neden olabilir.
  • Mobil kullanıcı arayüzü taklit edilmez (özellikle adres çubuğunun gizlenmesi sayfa yüksekliğini etkiler).
  • Anlam karmaşasını giderme pop-up'ları (birkaç dokunma hedefinden birini seçtiğiniz) desteklenmez.
  • Birçok donanım API'si (ör. orientationchange etkinliği) kullanılamaz.