Chrome 81では、システムテストでクリップボードを読み込めなくなったみたいです

はじめに

最近、FJORD BOOT CAMPのリポジトリにPRを出そうと思ったら、急にシステムテストが通らなくなってしまいました。

自分なりに原因や解決方法を色々調べてみたのですが、中々解決することができず、@JunichiItoさんや、@hasehiro25さんに助けていただいたので、そこで学んだことをまとめたいと思います。

今回起こった問題のまとめ

環境

Ruby 2.6.5
Ruby on Rails 6.0.2.1
minitest 5.1
capybara 3.31.0
selenium-webdriver 3.142.7
Google Chrome Version 81.0.4044.92

問題の概要

以下のリポジトリでPRを出したとき、CircleCI上で今まで通っていたシステムテストが落ちました。その1日後、ローカルでもシステムテストが落ちるようになってしまいました。

github.com

今回エラーが発生したテストコード

前提として、今回のテストコードがどういう機能をテストしているかを説明します。

FJORD BOOT CAMPには、受講生が書いた日報や提出物に、他の受講生やメンターが自由にコメントを付けられるという機能があります。そこで、そのコメントの投稿日時をクリックすると、そのコメントのリンクがクリップボードにコピーされるという機能があり、それをテストしようとしています。

そして、今回エラーが発生したテストコードは以下です。

test "comment url is copied when click its updated_time" do
    # seleniumがクリップボードを読み込み、クリップボードに書き込めるように権限を与えます
    page.driver.browser.execute_cdp("Browser.grantPermissions", origin: page.server_url, permissions: ["clipboardRead", "clipboardWrite"])  
    visit "/reports/#{reports(:report_1).id}"
    first(:css, ".thread-comment__created-at").click
    # evaluate_async_scriptは渡した、promiseが使われているJavaScriptのコードを評価することができます
    # ここでは、クリップボードを読み込んで、それが望んだ値になっているかを検証しています
    clip_text = page.evaluate_async_script("navigator.clipboard.readText().then(arguments[0])")
    assert_equal current_url + "#comment_#{comments(:comment_1).id}", clip_text

エラーログ

上記のテストコードを実行すると以下のようなエラーログが出ました。

Error:
CommentsTest#test_comment_url_is_copied_when_click_its_updated_time:
Selenium::WebDriver::Error::InvalidArgumentError: invalid argument: Unknown permission type: clipboardRead
  (Session info: headless chrome=81.0.4044.92)
    test/system/comments_test.rb:142:in `block in <class:CommentsTest>'


rails test test/system/comments_test.rb:141

以下のseleniumがクリップボードを読み込めるように権限を与えているところが問題で、"clipboardRead"なんてものは知らないという意味です。

    page.driver.browser.execute_cdp("Browser.grantPermissions", origin: page.server_url, permissions: ["clipboardRead", "clipboardWrite"])

エラーの原因

どうやら、Google Chromeが81にバージョンアップされたことが原因のようでした。バージョンアップ前では、テストが全て通ったという報告があり、CircleCI上とローカルで時間差で落ちるようになってしまったというのも、CircleCI上ではローカルよりも早くバージョンアップされたからではないかと、結論づけました。

公式の情報を探してみたのですが、見当たらず以下がソースになってしまうのですが、Chrome81から"clipboardRead"にpermissionを与える方法は使えなくなってしまったようです。

https://gitmemory.com/issue/marp-team/marp-cli/190/564376272

テストコードをどのように修正したのか

自分では思い付かず、悩んでいたところJunichiItoさんが、以下のように修正してはどうかと教えてくださりました。

 test "comment url is copied when click its updated_time" do
    visit "/reports/#{reports(:report_1).id}"
    first(:css, ".thread-comment__created-at").click
    # クリップボードを読み込めないため、テキストエリアにペーストして、URLが正しくコピーされていることを検証
    # shift, insertキーでペーストを行っている
    find('#js-new-comment').send_keys [:shift, :insert]
    clip_text = find('#js-new-comment').value
    assert_equal current_url + "#comment_#{comments(:comment_1).id}", clip_text
  end

上記のようにテストコードを修正すると、無事テストが通りました🎉

最終的に提出したPRは以下です。

github.com

感想

Chromeのバージョンアップによる不具合を初めて体験しました💦 ただ、Chromeのバージョンアップによって、これまで通っていたシステムテストが落ちるということは、ままあるようです。

また、できるプログラマーの方の問題解決に至るまでの速度がすごく早いことを実感しました。経験から勘所が分かっているのでしょうが、私も素早く問題解決ができるような、自走できるプログラマーになりたいと思いました💪

参考にさせていただいたサイト

Preview Error: Unknown permission type: clipboardRead

Performing a copy and paste with Selenium 2 - Stack Overflow

koheitakahashiのブログ

2020.07.01にプログラマーとして生を受けた私が学んだことや、日常について徒然に書いていきます。