Cucumber 视口日志服务

wdio-cucumber-viewport-logger-service 是一个第三方包，更多信息请参见GitHub | npm

WebdriverIO 的 Cucumber 视口日志服务

此服务增加了将您的 Cucumber 步骤和其他调试信息直接记录到基于 WebriverIO 的解决方案的浏览器窗口中的可能性。在使用设备或虚拟机且无法直接物理访问它们以及无法设置交互式会话来深入调试您的端到端测试的情况下，它特别有用。

快速入门

安装软件包

npm install wdio-cucumber-viewport-logger-service --save-dev

将服务添加到您的services配置部分，例如：

  services: [
    //...
    'cucumber-viewport-logger',
    //...
]

服务选项

选项	描述	类型	默认值
numberOfSteps	视口中将显示的步骤数	数字	3
enabled	启用/禁用服务	布尔值	true
styles	日志记录包装器、步骤关键字和步骤文本的 CSS 样式，请参见下面的示例	对象

// wdio.conf.js
exports.config = {
    // ...
    services: [
        ['cucumber-viewport-logger', {
            numberOfSteps: 5,
            enabled: process.env.VP_LOGGER === '1', // service will be enabled only when you set `VP_LOGGER` enviroment variable to `1`
            // set CSS custom styles for particular elements
            styles: {
                wrapper: { backgroundColor: 'white' },
                keyword: { color: 'red' },
                text: {
                    fontSize: '30px',
                    color: 'green',
                },
                closeButton: {
                    color: 'red',
                },
            },
        },]
    ]
    // ...
};

API

logToViewport(message, styles) - 使用自定义 CSS 样式（非强制性）呈现自定义消息，您可以在您的步骤定义中使用它，例如：

When(/^I render message: "([^"]*)"$/, { timeout: 120000 }, function (message) {
   browser.logToViewport(message, { text: { color: 'green' } });
});

removeViewportLogMessage() - 删除视口消息部分，例如，在进行视觉断言时可能很有用

pointerEvents: 'none'

默认情况下，所有鼠标事件（单击、悬停等）都通过消息部分传递，例如：而不是单击消息部分，您的点击“传递”到消息旁边的元素（您的应用程序元素），如果您希望更改此行为，请将包装器样式“pointerEvents”选项设置为“auto”，例如

/ wdio.conf.js
exports.config = {
    // ...
    services: [
        ['cucumber-viewport-logger', {
     
            styles: {
                wrapper: { pointerEvents: 'auto' },
            },
        },]
    ]
    // ...
};