如何使用 cypress 视口刷新重新加载答案

【问题标题】：how to use cypress viewport refresh reload如何使用 cypress 视口刷新重新加载
【发布时间】：2019-05-08 15:55:49
【问题描述】：

网站应该只能在移动网络上运行（在桌面网络上显示错误消息），尝试使用 cypress 视口实现相同的自动化。

手动测试步骤：在 chrome 中，我们在桌面 Web 应用程序中启动一个 URL，应用程序显示错误页面。然后切换到chrome模拟器模式，刷新应用，就会显示实际页面。

使用 cypress 实现自动化：启动应用程序、最小化到移动视图、重新加载应用程序。

预计，重新加载页面后，实际应用程序页面应该显示在移动端视图中，但移动端显示错误页面。

我的代码如下所示

    cy.visit('url')
    cy.viewport('iphone-6')
    cy.wait(200)

有人可以帮忙吗？

【问题讨论】：

这是stackoverflow.com/questions/51048880/…的副本吗？

标签： javascript node.js automation cypress

【解决方案1】：

阅读您的评论后，如果您想在移动视图中初始化您的测试，您需要将您的 cy.viewport() 调用放入 beforeEach 挂钩中。

类似这样的：

context('iphone-6 resolution', function () {
    beforeEach(function () {
      // run these tests as if in a mobile browser
      // and ensure our responsive UI is correct
      cy.viewport('iphone-6')
    })

    it('your test logic', function () {
      ...
    })
  })

我不知道我是否完全理解问题所在，但您可以cy.reload() 在视口更改后强制重新加载页面。

cy.visit('url')
cy.viewport('iphone-6')
cy.reload()

您可以在赛普拉斯文档here 中找到有关此命令的更多信息。

【讨论】：

我并不清楚这个问题，目的是只在移动网络视图中查看，因为在桌面上该网站不打算工作，尝试使用 --> const mobileUserAgent = "Mozilla/5.0 ( Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.131 Mobile Safari/537.36" 但不像柏树那样工作，将其视为桌面网络。加载时是否有任何代码可以添加 t 视为 android 设备网络

【解决方案2】：

尝试添加以下内容：

在 cypress.json 文件中，添加 =="modifyObstructiveCode": false, "chromeWebSecurity": false
在 cy.visit 方法中添加用户代理

cy.visit('https://www.your_website_url.com/',{ 标题：{ "user-agent": "Mozilla/5.0 (Linux; Android 8.0.0; SM-G955U Build/R16NW) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Mobile Safari/537.36" } });

这个解决方案帮助我解决了 mweb 重新加载问题。

【讨论】：