无法获取移动版本的网站以在WebdriverIO中呈现

Question

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

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

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

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

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

Answer 1

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

我看到两种简单的方法：

1.我们在Chrome中模拟移动设备。我们通过ChromeDevTools启用移动仿真功能来管理这一点。您必须通过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'等。
• 你可以在这里(Chrome)或这里(Firefox)找到完整的user-agents列表

---

阿拉伯数字。我们使用Appium来模拟我们的移动设备。我们必须安装 @wdio/appium-service WebdriverIO 插件。

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