{"id":3530,"date":"2018-09-04T09:20:06","date_gmt":"2018-09-04T00:20:06","guid":{"rendered":"https:\/\/blog.timecrowd.net\/?p=3530"},"modified":"2018-09-04T09:20:06","modified_gmt":"2018-09-04T00:20:06","slug":"e2e-test-with-headless-chrome","status":"publish","type":"post","link":"https:\/\/blog.timecrowd.net\/e2e-test-with-headless-chrome\/","title":{"rendered":"\u30d8\u30c3\u30c9\u30ec\u30b9 Chrome\u3067\u59cb\u3081\u308bE2E\u30c6\u30b9\u30c8"},"content":{"rendered":"<p>\u7686\u3055\u3093\u30c6\u30b9\u30c8\u66f8\u3044\u3066\u307e\u3059\u304b\uff1f\u4eca\u65e5\u306f\u30d8\u30c3\u30c9\u30ec\u30b9 Chrome\u3092\u4f7f\u3063\u3066Rails\u4e0a\u3067E2E\u30c6\u30b9\u30c8\u3092\u8a66\u3057\u3066\u307f\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<p>\u9031\u672b\u306b\u4eca\u5e74\u306e\u590f\u521d\u3081\u3066\u306e\u30d7\u30fc\u30eb\u306b\u884c\u3063\u3066\u65e5\u713c\u3051\u3067\u808c\u304c\u30d2\u30ea\u30d2\u30ea\u3057\u3066\u3044\u308b\u30a8\u30f3\u30b8\u30cb\u30a2\u306e\u4e09\u5b85\u3067\u3059\u3002<\/p>\n<p>\u30d8\u30c3\u30c9\u30ec\u30b9 Chrome\u306b\u3064\u3044\u3066\u306fGoogle\u306e\u30a8\u30f3\u30b8\u30cb\u30a2\u306b\u3088\u3063\u3066\u66f8\u304b\u308c\u305f\u8a18\u4e8b\u3092\u4e00\u8aad\u3057\u3066\u304a\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>\u30d8\u30c3\u30c9\u30ec\u30b9 Chrome \u3053\u3068\u306f\u3058\u3081 \u00a0|\u00a0 Web \u00a0|\u00a0 Google Developers<br \/>\n<a href=\"https:\/\/developers.google.com\/web\/updates\/2017\/04\/headless-chrome\" target=\"_blank\" rel=\"noopener\">https:\/\/developers.google.com\/web\/updates\/2017\/04\/headless-chrome<\/a><\/p>\n<div id=\"toc_container\" class=\"toc_white no_bullets\"><p class=\"toc_title\">\u76ee\u6b21<\/p><ul class=\"toc_list\"><li><a href=\"#_Chrome\"><span class=\"toc_number toc_depth_1\">1<\/span> \u30d8\u30c3\u30c9\u30ec\u30b9 Chrome\u3092\u8a66\u3057\u3066\u307f\u308b<\/a><\/li><li><a href=\"#Rails_Capybara__Chrome\"><span class=\"toc_number toc_depth_1\">2<\/span> Rails + Capybara + \u30d8\u30c3\u30c9\u30ec\u30b9 Chrome<\/a><\/li><li><a href=\"#i\"><span class=\"toc_number toc_depth_1\">3<\/span> \u307e\u3068\u3081<\/a><\/li><\/ul><\/div>\n<h2><span id=\"_Chrome\">\u30d8\u30c3\u30c9\u30ec\u30b9 Chrome\u3092\u8a66\u3057\u3066\u307f\u308b<\/span><\/h2>\n<p>\u8a18\u4e8b\u306b\u66f8\u304b\u308c\u305f\u5185\u5bb9\u3092\u53c2\u8003\u306b\u3001\u307e\u305a\u306f\u30d8\u30c3\u30c9\u30ec\u30b9 Chrome\u3092\u30b3\u30de\u30f3\u30c9\u30e9\u30a4\u30f3\u304b\u3089\u4f7f\u3063\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<pre><code>$ chrome --headless --disable-gpu --remote-debugging-port=9222 https:\/\/timecrowd.net\r\n[0903\/094149.841575:WARNING:dns_config_service_posix.cc(181)] dns_config has unhandled options!\r\n[0903\/094149.843062:ERROR:gpu_process_transport_factory.cc(1016)] Lost UI shared context.\r\n\r\nDevTools listening on ws:\/\/127.0.0.1:9222\/devtools\/browser\/0f990964-6a8f-4258-9908-01d2d507032b\r\n[0903\/094149.939474:ERROR:gl_implementation.cc(292)] Failed to load \/Applications\/Google Chrome.app\/Contents\/Versions\/68.0.3440.106\/Google Chrome Framework.framework\/Versions\/Current\/Libraries\/libswiftshader_libGLESv2.dylib: dlopen(\/Applications\/Google Chrome.app\/Contents\/Versions\/68.0.3440.106\/Google Chrome Framework.framework\/Versions\/Current\/Libraries\/libswiftshader_libGLESv2.dylib, 1): image not found\r\n[0903\/094150.146802:ERROR:gl_implementation.cc(292)] Failed to load \/Applications\/Google Chrome.app\/Contents\/Versions\/68.0.3440.106\/Google Chrome Framework.framework\/Versions\/Current\/Libraries\/libswiftshader_libGLESv2.dylib: dlopen(\/Applications\/Google Chrome.app\/Contents\/Versions\/68.0.3440.106\/Google Chrome Framework.framework\/Versions\/Current\/Libraries\/libswiftshader_libGLESv2.dylib, 1): no suitable image found.  Did find:\r\n        \/Applications\/Google Chrome.app\/Contents\/Versions\/68.0.3440.106\/Google Chrome Framework.framework\/Versions\/Current\/Libraries\/libswiftshader_libGLESv2.dylib: file system sandbox blocked stat()\r\n[0903\/094150.179793:ERROR:viz_main_impl.cc(201)] Exiting GPU process due to errors during initialization<\/code><\/pre>\n<p>\u306a\u306b\u3084\u3089\u8272\u3005\u30a8\u30e9\u30fc\u304c\u51fa\u3066\u3044\u307e\u3059\u304c\u3072\u3068\u307e\u305a\u7121\u8996\u3057\u3066\u304a\u304d\u307e\u3059\u3002<\/p>\n<p><code>--remote-debugging-port<\/code>\u3067\u30dd\u30fc\u30c8\u3092\u6307\u5b9a\u3059\u308b\u3068\u3001<code>http:\/\/localhost<\/code>\u306b\u6307\u5b9a\u3057\u305f\u30dd\u30fc\u30c8\u3067\u30a2\u30af\u30bb\u30b9\u3059\u308b\u3068\u30d8\u30c3\u30c9\u30ec\u30b9 Chrome\u304c\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3057\u3066\u3044\u308b\u5185\u5bb9\u3092\u78ba\u8a8d\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-3531\" src=\"https:\/\/blog.timecrowd.net\/wp-content\/uploads\/2018\/09\/headless-chrome-inspect-01.png\" alt=\"\" width=\"1440\" height=\"803\" srcset=\"https:\/\/blog.timecrowd.net\/wp-content\/uploads\/2018\/09\/headless-chrome-inspect-01.png 1440w, https:\/\/blog.timecrowd.net\/wp-content\/uploads\/2018\/09\/headless-chrome-inspect-01-768x428.png 768w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-3532\" src=\"https:\/\/blog.timecrowd.net\/wp-content\/uploads\/2018\/09\/headless-chrome-inspect-02.png\" alt=\"\" width=\"1440\" height=\"759\" srcset=\"https:\/\/blog.timecrowd.net\/wp-content\/uploads\/2018\/09\/headless-chrome-inspect-02.png 1440w, https:\/\/blog.timecrowd.net\/wp-content\/uploads\/2018\/09\/headless-chrome-inspect-02-768x405.png 768w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>\u30d5\u30e9\u30b0\u3092\u5229\u7528\u3059\u308b\u3053\u3068\u3067\u30b3\u30de\u30f3\u30c9\u30e9\u30a4\u30f3\u3067\u8272\u3005\u306a\u3053\u3068\u304c\u3067\u304d\u308b\u3088\u3046\u3067\u3059\u3002\u8a66\u3057\u306b\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8\u3092\u64ae\u3063\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<pre><code>$ chrome --headless --disable-gpu --screenshot https:\/\/timecrowd.net<\/code><\/pre>\n<p>\u3059\u308b\u3068\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u305f\u540c\u3058\u30d1\u30b9\u4e0a\u306bscreenshot.png\u3068\u3044\u3046\u30d5\u30a1\u30a4\u30eb\u304c\u51fa\u6765\u4e0a\u304c\u3063\u3066\u3044\u307e\u3057\u305f\u3002<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-3534\" src=\"https:\/\/blog.timecrowd.net\/wp-content\/uploads\/2018\/09\/screenshot.png\" alt=\"\" width=\"1600\" height=\"1200\" srcset=\"https:\/\/blog.timecrowd.net\/wp-content\/uploads\/2018\/09\/screenshot.png 1600w, https:\/\/blog.timecrowd.net\/wp-content\/uploads\/2018\/09\/screenshot-768x576.png 768w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<h2><span id=\"Rails_Capybara__Chrome\">Rails + Capybara + \u30d8\u30c3\u30c9\u30ec\u30b9 Chrome<\/span><\/h2>\n<p>\u3067\u306f\u3053\u3053\u304b\u3089\u306fRails\u30a2\u30d7\u30ea\u3067\u30d8\u30c3\u30c9\u30ec\u30b9 Chrome\u3092\u4f7f\u3063\u305fE2E\u30c6\u30b9\u30c8\u3092\u8a66\u3057\u3066\u307f\u308b\u3053\u3068\u306b\u3057\u307e\u3059\u3002<\/p>\n<p>\u307e\u305a\u306f\u5fc5\u8981\u306agem\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n<pre><code>group :test do\r\n  gem 'capybara'\r\n  gem 'chromedriver-helper'\r\n  gem 'selenium-webdriver'\r\nend<\/code><\/pre>\n<p>Chrome\u3092Selenium\u3067\u5b9f\u884c\u3055\u305b\u308b\u305f\u3081\u306b\u306fChromeDriver\u304c\u5fc5\u8981\u3067\u3059\u3002<\/p>\n<p>chromedrive-helper\u306f\u5404OS\u306b\u5408\u308f\u305b\u305f\u30d0\u30a4\u30ca\u30ea\u3092\u53d6\u3063\u3066\u304f\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308b\u3088\u3046\u3067\u3059\u3002<\/p>\n<p>\u307e\u305f\u30d8\u30c3\u30c9\u30ec\u30b9 Chrome\u3068chromedriver\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u95a2\u4fc2\u304c\u610f\u5916\u306b\u53b3\u3057\u3044\u306e\u3067\u3001\u3046\u307e\u304f\u3044\u304b\u306a\u3044\u3068\u304d\u306fchromedriver-helper\u306e\u8a2d\u5b9a\u3067\u7c21\u5358\u306b\u4f7f\u7528\u3059\u308b\u30d0\u30fc\u30b8\u30e7\u30f3\u3092\u5909\u66f4\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<pre><code>Chromedriver.set_version \"2.24\"<\/code><\/pre>\n<p>\u3042\u3068\u306fcapybara\u306eREADME\u3092\u53c2\u8003\u306b\u57fa\u672c\u7684\u306a\u8a2d\u5b9a\u3092\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u3057\u3066driver\u306b<code>selenium_chrome_headless<\/code>\u3092\u6307\u5b9a\u3057\u3066\u4e0a\u3052\u308b\u3060\u3051\u3067\u3001\u30d8\u30c3\u30c9\u30ec\u30b9 Chrome\u3092\u4f7f\u3063\u3066\u30c6\u30b9\u30c8\u3092\u5b9f\u884c\u3057\u3066\u304f\u308c\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<pre><code>require 'capybara\/rails'\r\nrequire 'capybara\/rspec'\r\nCapybara.javascript_driver = :selenium_chrome_headless\r\n<\/code><\/pre>\n<p>\u3082\u3057\u30d8\u30c3\u30c9\u30ec\u30b9 Chrome\u306e\u8d77\u52d5\u30aa\u30d7\u30b7\u30e7\u30f3\u3092\u5909\u66f4\u3057\u3066\u5b9f\u884c\u3057\u305f\u3044\u5834\u5408\u306b\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306bdriver\u3092\u518d\u767b\u9332\u3057\u3066\u3042\u3052\u308b\u3060\u3051\u3067OK\u3067\u3059\u3002<\/p>\n<pre><code>Capybara.register_driver :selenium_chrome_headless do |app|\r\n  Capybara::Selenium::Driver.new(\r\n    app,\r\n    browser: :chrome,\r\n    desired_capabilities: Selenium::WebDriver::Remote::Capabilities.chrome(\r\n      chrome_options: {\r\n        args: %w[headless disable-gpu window-size=1680,1050],\r\n      },\r\n    )\r\n  )\r\nend\r\n<\/code><\/pre>\n<h2><span id=\"i\">\u307e\u3068\u3081<\/span><\/h2>\n<p>\u4eca\u56de\u306f\u30d8\u30c3\u30c9\u30ec\u30b9 Chrome\u3092\u4f7f\u3063\u3066E2E\u30c6\u30b9\u30c8\u3092\u66f8\u304f\u307e\u3067\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u306e\u65b9\u6cd5\u3092\u7d39\u4ecb\u3057\u307e\u3057\u305f\u3002<\/p>\n<p>\u624b\u52d5\u30c6\u30b9\u30c8\u306f\u6642\u9593\u304c\u304b\u304b\u3063\u305f\u308a\u3001\u30e0\u30e9\u304c\u3067\u3066\u304d\u3066\u3057\u307e\u3063\u305f\u308a\u3059\u308b\u306e\u3067\u3001\u30ac\u30b7\u30ac\u30b7\u81ea\u52d5\u5316\u3057\u3066\u3044\u304d\u305f\u3044\u3067\u3059\u306d\u3002\u305f\u3060E2E\u30c6\u30b9\u30c8\u306f\u9045\u3044\u3068\u3044\u3046\u6b20\u70b9\u3082\u3042\u308b\u306e\u3067\u3001\u3059\u3079\u3066\u306e\u6a5f\u80fd\u3092\u307e\u3093\u3079\u3093\u306a\u304f\u3084\u308b\u306e\u3067\u306f\u306a\u304f\u3001\u4e3b\u8981\u306a\u6a5f\u80fd\u3092\u62bd\u51fa\u3057\u3066\u5b9f\u884c\u3059\u308b\u306a\u3069\u3001\u30d0\u30e9\u30f3\u30b9\u3088\u304f\u53d6\u308a\u5165\u308c\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"\u7686\u3055\u3093\u30c6\u30b9\u30c8\u66f8\u3044\u3066\u307e\u3059\u304b\uff1f\u4eca\u65e5\u306f\u30d8\u30c3\u30c9\u30ec\u30b9 Chrome\u3092\u4f7f\u3063\u3066Rails\u4e0a\u3067E2E\u30c6\u30b9\u30c8\u3092\u8a66\u3057\u3066\u307f\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002 \u9031\u672b\u306b\u4eca\u5e74\u306e\u590f\u521d\u3081\u3066\u306e&#8230;","protected":false},"author":5,"featured_media":3538,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"cybocfi_hide_featured_image":""},"categories":[5],"tags":[12],"_links":{"self":[{"href":"https:\/\/blog.timecrowd.net\/wp-json\/wp\/v2\/posts\/3530"}],"collection":[{"href":"https:\/\/blog.timecrowd.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.timecrowd.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.timecrowd.net\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.timecrowd.net\/wp-json\/wp\/v2\/comments?post=3530"}],"version-history":[{"count":8,"href":"https:\/\/blog.timecrowd.net\/wp-json\/wp\/v2\/posts\/3530\/revisions"}],"predecessor-version":[{"id":3545,"href":"https:\/\/blog.timecrowd.net\/wp-json\/wp\/v2\/posts\/3530\/revisions\/3545"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.timecrowd.net\/wp-json\/wp\/v2\/media\/3538"}],"wp:attachment":[{"href":"https:\/\/blog.timecrowd.net\/wp-json\/wp\/v2\/media?parent=3530"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.timecrowd.net\/wp-json\/wp\/v2\/categories?post=3530"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.timecrowd.net\/wp-json\/wp\/v2\/tags?post=3530"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}