Cucumber 視窗記錄器服務

wdio-cucumber-viewport-logger-service 是一個第三方套件，如需更多資訊，請參閱 GitHub | npm

適用於 WebdriverIO 的 Cucumber 視窗記錄器服務

此服務增加了將您的 Cucumber 步驟和其他偵錯資訊直接記錄到基於 WebdriverIO 的解決方案的瀏覽器視窗中的可能性。當使用無法直接實體存取的裝置或虛擬機器，且無法設定互動式會話以深度偵錯您的 e2e 測試時，尤其有用。

快速開始

安裝套件

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' },
            },
        },]
    ]
    // ...
};