如何在移动视图wrt功能中运行柏树，而不仅仅是视口？

Question

我有一个web应用程序，它分别在网络和移动设备上运行。例如，在web上，整个表单只显示在一个屏幕上，而在移动上，表单被划分为两个步骤。填充第一部分后，用户单击proceed按钮并移动到下一页。

我用柏树来测试网络应用程序，一切都很好。但是，如果我通过添加以下行来测试移动视图

    cy.viewport('iphone-5');

它确实表明测试是在iPhone5的视口上运行的，但是它只是响应性的，而不是功能上的改变。就像我只在一个页面上看到的表单一样，响应性确实会影响到它，但是表单并没有像在移动中那样显示在两个单独的屏幕上。我如何确保它也改变了功能？我遗漏了什么？

我如何在手机上测试这个应用程序，就好像它实际上是在移动设备上运行一样，而不仅仅是在响应性方面。

Answer 1

你可以这样做：

describe('Test Suite', () => {
  before(() => {
    cy.viewport('iphone-5')
  })

  it('Some Test', () => {
    cy.visit(url, {
      headers: {
        'user-agent':
          'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36',
      },
    })
  })
})

与cy.visit()一起，我们现在正在传递一个userAgent头。您可以从这里获得一个用户代理列表。目前，我已经将userAgent用于Chrome UA string。

您还可以在您的userAgent文件中添加cypress.json：

{
  userAgent: 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36'
}

Answer 2

尝试在window:before:load事件上调整用户代理，我似乎记得这是实现它的方法。

beforeEach(() => {
  cy.viewport('iphone-5')
  cy.on('window:before:load', (win) => {
    Object.defineProperty(win.navigator, 'userAgent', {
       value: 'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1',
      });
  })
})

注意：beforeEach()也是首选的，我认为在测试之间有重置。

只有当应用程序实际检查它时，用户代理才会有用，但是您在注释中提到，它只根据视图端口来标识它。

如果您想在测试中检查isMobile变量，可以(暂时)从应用程序中公开它。

// app code after mobile indicator is set

if (window.Cypress) { // only in a test
  window.Cypress.isMobile = isMobile
}

// test
cy.viewport('iphone-5')
cy.visit('/')
cy.wrap(Cypress.isMobile).should('eq', true)