Safariのデベロッパ機能の再発見

6:20 - HTML image source set

<img
  src="astronaut_1x.jpg"
  srcset="astronaut_2x.jpg 2x astronaut_3x.jpg 3x"
/>

6:27 - CSS image set

.starfield {
  background-image: image-set("stars_1x.jpg" 1x, "stars_2x.jpg" 2x);
}

6:32 - CSS resolution media query

@media (min-resolution: 2dppx) {
  .divider-line {
    border: 0.5px solid grey;
  }
}

13:41 - Inspectable WKWebViews and JSContexts

let webConfiguration = WKWebViewConfiguration()
let webView = WKWebView(frame: .zero, configuration: webConfiguration)

if #available(macOS 13.3, iOS 16.4, *) {
  webView.isInspectable = true
}

let jsContext = JSContext()
jsContext?.name = "Context name"

if #available(macOS 13.3, iOS 16.4, tvOS 16.4, *) {
  jsContext?.isInspectable = true
}

15:32 - WebDriver test

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.safari.options import Options as SafariOptions

options = SafariOptions()
driver = webdriver.Safari(options=options)

driver.get("https://webkit.org/web-inspector/")

search_element = driver.find_element(by=By.ID, value="search")
search_element.send_keys("device")

assert(driver.find_element(by=By.LINK_TEXT, value="Device Settings"))

driver.quit()