【Cypress】スマホのテスト

CypressでE2Eテストを行う際にスマホのテストをしたい

スマホのテストとは以下をスマホアクセスと同様に設定してテストをする

• user-agent：chromeの開発者モードのiPhone 6/7/8 Plusにしたときと同じに
• viewport：iPhone6の414 x 736に

user-agent

やり方① configで設定

ドキュメントにあるようにcypress.json に設定する docs.cypress.io

ただ、テスト毎にラップトップとスマホのテストを切り替えたかったので、テスト毎に設定できる方法を

やり方② visitのoptionでheaderを設定

cy.visitのオプションにheaderを仕込むことができるので、そこで設定する

docs.cypress.io

    cy.visit('http://localhost:3000', {
      headers: {
        "User-Agent": "Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1"
      }
    })

viewport

上の記事にいろいろとやり方が載っている https://example.cypress.io/commands/viewport

cy.viewport('iphone-6')