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

Question

我有一个 Web 应用程序，它在 Web 和移动设备上的行为是分开的。例如，在 Web 上，整个表单仅显示在一个屏幕上，而在移动设备上，表单分为两个步骤。填写第一部分后，用户点击 proceed 按钮并移至下一页

我正在使用 cypress 测试网络应用程序，一切运行良好。但是，如果我通过添加此行

来测试移动视图

    cy.viewport('iphone-5');

它确实表明测试是运行在 iphone-5 的视口上，但它只是响应，而不是明智地改变功能。正如我只在单个页面上看到表单一样，响应性会受到影响，但表单不会像在移动设备上那样显示在两个单独的屏幕上。我如何确保它也明智地改变功能？我错过了什么？

如何在移动设备上测试应用程序，就好像它实际上是在移动设备上一样运行而不仅仅是响应能力。

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 header。您可以从 here 中获取 user-agent 个列表。目前我已经为 Chrome UA string.

使用了 userAgent

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

{
  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)

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

How to run cypress in mobile view wrt functionality not just viewport?

cypress

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