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

Question

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

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

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

? 预期结果：应呈现网站的移动版本

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

Answer 1

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

我看到两种直接的方法：

1.我们在 Chrome 中模拟移动设备。我们通过Chrome DevTools启用移动仿真功能来管理它。您必须指定一个自定义的用户代理和设备类型 在通过属性：chromeOptionsmobileEmulation

? 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 此处( Chrome ) 或此处( Firefox )找到完整列表

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

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