이 기사는 Selenium/Appium Advent Calendar 2015의 23 일째 기사입니다.

스마트폰용 Web UI 테스트를 수행하기 위한 도구로는 Chrome Developer Tool, Safari Responsive Design Mode(이하 정리하여 '개발자 모드')가 있습니다.

※진짜 개발자 모드는, DOM이라든지 Network라든지 그 외 여러가지……라고 하는 세세한 돌진은 없이 부탁드립니다.

이것만으로도 매우 편리하고, 더 이상 스마트폰용 Web 개발을 위해서 빠뜨릴 수 없는 툴이 되고 있네요.

개발자 모드는 다음과 같은 일을 해주는 도구입니다.

단말기의 화면 해상도(예: 폭 1080x높이 1920)를 시뮬레이션한 후, 화면상에 표시할 수 있는 정도의 스케일(50%라든지)로 표시

서버에 요청할 때 User Agent 문자열을 모바일 브라우저 (Android Chrome 또는 iOS Safari)에

onmousedown 등의 이벤트를 ontouchstart 등의 대응하는 이벤트로 읽는다

다음은 각각의 샘플 이미지입니다.

Chrome Developer Tool (Windows)

(User Agent 문자열로서 iPhone6 ​​Safari의 것을 전달하고 있으므로 SP 버전의 검색 결과 페이지가 보입니다)

Safari Responsive Design Mode (Mac)

사용자 에이전트 변경과 같은 작업은 동일합니다.
Minimum에서 Apple 같은 디자인의 반응형 디자인 모드입니다.

Selenium에서 개발자 모드 사용

웹 브라우저의 UI 자동화라고 하면, Selenium WebDriver입니다.

Selenium에서 웹 페이지 테스트를 할 때 개발자 모드에서 지정된 페이지를 열 수 있다면 지금까지 SP 터미널 테스트를 위해 터미널을 긁어 모으고 WebDriver를 설치하고 ......라는 테스트를 어느 정도 불필요하게 할 수 있습니다.

Selenium Web Driver에서 Chrome 개발자 모드 (Developer Tool) 시작

Chrome Web Driver에는 개발자 모드 지정이 있습니다.

여기에도 기사가 있습니다. ぃ tp // 코 m / 오키 탄 / ms / 예 6f5094319b964 84 1

Selenium Web Driver에서 Safari 개발자 모드 (Responsive Design Mode) 시작

Elcapitan에서 (?) 구현 된 Safari의 반응 형 디자인 모드이지만 현재는 Safari Web Driver에서 시작 옵션으로 지정할 수 없습니다.

Responsive Design Mode의 입구는 `Option + Command + R"이므로, 윈도우 기동 후에 키를 보내면 됩니다.
Java의 경우, 다음을 사용하면 Responsive Design Mode의 WebDriver가 완성됩니다.

ResponsiveDesignMode.java

import java.awt.AWTException;
import java.awt.Robot;
import java.awt.event.KeyEvent;
import java.lang.Exception;

import lombok.Cleanup;

import org.openqa.selenium.safari.SafariDriver;

public class SafariCustomDriverProvider {
  public static void main(String[] args) throws Exception {
    // Safari Driver 起動
    @Cleanup("quit")
    final SafariDriver driver = new SafariDriver();

    // Safari Window を Screen Top に
    Runtime.getRuntime()
      .exec("open -a /Applications/Safari.app/Contents/MacOS/Safari")
      .waitFor();

    // Option + Command + R で Responsive Desing モード起動
    try {
      final Robot robot = new Robot();

      robot.keyPress(KeyEvent.VK_ALT);
      robot.keyPress(KeyEvent.VK_META);
      robot.keyPress(KeyEvent.VK_R);
      robot.delay(100);
      robot.keyRelease(KeyEvent.VK_ALT);
      robot.keyRelease(KeyEvent.VK_META);
      robot.keyRelease(KeyEvent.VK_R);
    } catch (AWTException e) {
      throw new RuntimeException(e);
    }

    driver.get("http://example.com/");
  }
}

이제 다음과 같은 결과를 얻을 수 있습니다.

끝에

개발자 툴의 기능이 오르는 것은, 개발시에는 물론, 자동화에 있어서도 기쁜 일입니다.
Selenium Web Driver는 스마트 폰 단말기에서의 Web UI 테스트를 간단하게 했습니다만, Selenium 스크립트를 기술하는 것은 PC상인 것을 생각하면, 실제의 CI에 짜넣은 타이밍에서는 어쨌든, 개발시는 로컬 환경에서 시도 할 수 없었습니다.

Chrome, Safari 모두, 개발자 툴을 기동하는 수고는 초기화의 타이밍으로 폰의 몇행의 코드를 쓰는 것만이므로, 매일의 개발 환경에 짜넣어 보면 어떻습니까.