WPT를 Chrome에서 실행하여 HTML5 API 이해

WPT란?



WPT (web-platform-tests) 라는 브라우저를 만드는 사람을 위한 테스트 스위트가 있다. 이것은, 브라우저가 어떻게 움직여야 하는지를 정의하고 있는 다양한 웹 표준을, 각 브라우저가 채우고 있는지를 확인하기 위한 테스트이지만, 웹 사이트를 만들고 있는 웹 개발자가 새로운 웹의 API를 어떻게 사용하면 좋은지 알아볼 때도 도움이 된다고 생각한다.

라고 하는 이야기를, 전철로 옆에 앉아 있었다고 한 사람에게 이야기하면 「그럼, 방법을(일본어로) 소개해 주세요.」라고 말해졌으므로, 간단하게 소개하고 싶다.

간편하게 시도



손쉽게 시도하고 싶다면, htps : // w3c - st. 오 rg 아래에 있는 원하는 테스트 파일을 열면 된다.

예를 들어, Service Worker Navigation Preload의 테스트라면 htps : // w3c - st. rg/세 rゔぃ세를 r rs/세 rゔぃ세를 r r/나ぃ가 치온-p레아 d/준케 d-엔코아 g. htps. HTML을 열면, 여러가지 실행되어, 최종적으로 아래와 같이 표시된다.


F12 또는 Ctrl+Shit+I로 DevTools를 기동할 수 있으므로, 브레이크 포인트를 걸어 페이지를 리로드하면 스텝 실행해 가면서 거동을 확인할 수 있다.

로컬로 시도



테스트 파일을 조금 변경하면서 거동을 시험해 가고 싶은 경우는, 로컬로 서버를 세우면 된다.
  • 우선, htps : // 기주 b. 이 m / w3c / u b p t t rm-sts 을 수중의 환경에 clone 한다.
  • hosts 파일을 다시 쓸 권한이 있는 경우 WPT의 README에 설명된 대로 테스트 도메인을 127.0.0.1로 향하도록 hosts 파일을 다시 씁니다. 권한이 없거나 귀찮은 경우에는 config.default.json 파일을 config.json에 복사하고 파일을 열고 check_subdomainsbind_hostnametruefalse로 다시 씁니다.
  • ./wpt serve에서 서버를 시작합니다. Windows의 경우 python wpt serve.
  • Chrome을 --user-data-dir=適当な空のディレクトリ--ignore-certificate-errors 인수로 시작합니다. (주의 : 증명서 에러를 무시하는 설정으로 기동하므로 이 환경은 테스트 이외의 목적으로 사용하지 않는 것.) 2.로 hosts 파일을 재기록하지 않았던 경우는 --host-resolver-rules="MAP *.test 127.0.0.1" 도 추가한다.

  • https://web-platform.test:8443/로 이동하여 원하는 테스트 파일을 엽니다.

  • Chromium의 LayoutTest



    WPT 프로젝트가 시작되기 전에, Chromium 웹 시험은 리포지토리third_party/WebKit/LayoutTests/에 놓여 있었다. 점차 WPT로 이행해 가자는 움직임은 있지만 일부 테스트는 아직 이행되지 않고 남아 있다. Chromium의 LayoutTest를 사용하고 싶다면 Chromium 소스를 checkout, third_party/WebKit/Tools/Scripts/run-blink-httpd, 실행htp://127.0.0.1:8000에 액세스하는 것이 좋습니다. http 이외의 디렉토리에 있는 테스트 파일은 직접 열어 실행할 수 있다. (덧붙여서, LayoutTest라는 이름은 역사적인 이유로, 레이아웃 처리 이외의 테스트도 포함되어 있다.)

    어디에 테스트가 있는지 검색하고 싶습니다.



    WPT는 정기적으로 Chromium의 리포지토리third_party/WebKit/LayoutTests/external/wpt/와 동기화되므로 Chromium의 코드 검색 CS. ch로 보 m. 오 rg에서 Chromium의 LayoutTest와 WPT를 모두 검색 할 수 있습니다. 여기에서 사용하고 싶은 API로 검색하면 목표 테스트를 찾을 수 있습니다.

    좋은 웹페이지 즐겨찾기