无法获取移动版网站以在 WebdriverIO 中呈现答案

【问题标题】：Cannot get Mobile version of website to render in WebdriverIO无法获取移动版网站以在 WebdriverIO 中呈现
【发布时间】：2019-11-24 02:19:32
【问题描述】：

我正在尝试让我的网页的移动版本在 WebdriverIO 中呈现，但加载的是桌面版本。

我在测试脚本中使用了以下语句：browser.setWindowSize(width, height);。浏览器以给定的width 和height 打开，但加载的是桌面网页而不是移动网页

我在测试脚本中使用了以下语句 browser.setWindowSize(411, 823);

❯ 预期结果： 应呈现移动版网站

❯ 实际结果： 呈现网站的桌面版

【问题讨论】：

标签： selenium selenium-webdriver selenium-chromedriver appium webdriver-io

【解决方案1】：

所以，据我了解，您想运行移动测试，并且假设通过调整浏览器窗口的大小，它会以某种方式触发移动视图？！这不是它的工作原理。

我看到了两种直接的方法：

1. 我们在 Chrome 中模拟移动设备。我们通过 Chrome DevTools 启用 Mobile Emulation 功能来管理这一点。您必须指定 自定义用户代理 & 设备类型 通过mobileEmulation 属性在您的chromeOptions 中：

❒ wdio.conf.js:

capabilities: [{
    maxInstances: 1,
    //
    browserName: 'chrome',
    chromeOptions: {
        mobileEmulation: {'deviceName': 'Nexus 5'},
        args: [ '--no-sandbox',
                '--disable-gpu',
                '--start-fullscreen',
                '--disable-notifications',
                //
                '--user-agent=Mozilla/5.0 (Windows NT 10.0; Win64; x64)
                 AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36'
        ]
    }
}],

这将在您的 Chrome 实例中创建一个移动模拟，使移动逻辑生效。然后，您可以继续进行针对移动设备的检查。

！注意：

如果您正在运行 wdio-v5 (WebdriverIOv5) => 在 goog:chromeOptions 对象中添加您的 Chrome 选项
如果您正在运行 wdio-v4 (WebdriverIOv4) => 在 chromeOptions 对象中添加您的 Chrome 选项
deviceName 示例：'iPhone 7'、'iPhone X'、'iPad Mini'、'Galaxy S5' 等
您可以找到user-agents here (Chrome) 或 here (Firefox) 的完整列表

2. 我们使用 Appium 来模拟我们的移动设备。我们必须安装@wdio/appium-service WebdriverIO 插件。

如果您之前没有使用过Appium，那么 THIS 是一个非常好的 WebdriverIO/Appium 样板项目，所以你不需要必须从头开始。

【讨论】：

非常感谢。通过将chromeOptions 更改为goog:chromeOptions，它几乎不需要修改。