Cypressでスマホモードでテストするには、config.jsonのuserAgentを変更する

環境

• macOS Mojave バージョン 10.14.6

前提条件

• Cypressは導入完了している

対象者

• CypressでPCではなく、スマホで検証したい
  • https://www.cypress.io/

手順

UserAgentを設定する

• 1. config.json に以下のコードを追加する

{
  "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1"
}

画面サイズをスマホにする

• 1. テストコードの前に、以下のコードを追加する

cy.viewport("iphone-6")

例

describe("view", () => {

  it("show ticket", () => {

    cy.viewport("iphone-6") // iphone6の大きさになる

    cy.visit("https://xxxx")
  })

参考

• https://docs.cypress.io/api/commands/viewport.html#Arguments

Intent to Deprecate and Freeze: The User-Agent string

• Google Chrome 81（2020年3月中旬）：“navigator.userAgent”によるUA文字列の取得を非推奨とする
• Google Chrome 83（2020年6月初め）：UA文字列のうち、ブラウザーのバージョンを凍結し、OSのバージョンを統一する
• Google Chrome 85（2020年9月上旬）：UA文字列を統一

• https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/-2JIRNMWJ7s/yHe4tQNLCgAJ