如何在独立模式下调试 webdriverio？

Posted 2023-02-16

【中文标题】如何在独立模式下调试 webdriverio？

【英文标题】：How to debug webdriverio in standalone mode?

【发布时间】：2018-04-20 09:26:03

【问题描述】：

http://webdriver.io/guide/getstarted/modes.html

尝试使用 Chromedriver 调试 webdriverio 测试时，我简直要疯了。您根本无法单步执行代码，因为 webdriverio 命令是异步的，并且浏览器会话与测试不同步。

这很令人沮丧，因为阅读文档时，您似乎需要像 Chai 或 wdio 这样的测试框架来生成测试，但这似乎需要大量工作才能拥有过程同步命令。

我只需要使用 webdriverio 抓取一些网站，但是这种异步命令很难使用 Chrome devtools 进行调试。

有没有办法强制 webdriverio 同步运行？

例如）

var loadedPage = webdriverio.remote(options).init().url('https://google.com');

除了loadedPage 还没有准备好并且在调试移到下一行时未定义。

【参考方案1】：

正如您正确指出的那样，一切都是异步的，但如果您有传统的顺序编程背景，您还可以选择使用 WDIO。

异步方法（不使用WDIO test-runner）：

首先，您需要了解一下javascript Promises，尤其是.then() 函数。

 var webdriverio = require('webdriverio');
 var options =  desiredCapabilities:  browserName: 'chrome'  ;
 var client = webdriverio.remote(options);
 client
     .init()
     .url('https://duckduckgo.com/')
     .setValue('#search_form_input_homepage', 'WebdriverIO')
     .click('#search_button_homepage')
     .getTitle()
     .then(function(title) 
         console.log('Title is: ' + title);
         // outputs: "Title is: WebdriverIO (Software) at DuckDuckGo"
     )
     .end();

使用上述方法，您将始终必须链接您的命令，但您也可以在 .then() 语句中使用同步命令。

出于调试目的，WebdriverIO 以the .debug() command 的形式提供了设计精美的Read-Eval-Print-Loop (REPL) interface。只需在您希望执行停止之前将其添加到您的测试用例中，这样您就可以在您选择的终端中进行调试。

注意：.debug() 命令的默认超时时间很短。确保增加它。

同步方法（使用WDIO test-runner）：

为什么不使用 WDIO 测试运行器让您的生活更轻松？您可以从运行向导开始：

 // if you installed the package globally, or you have the wdio
 // binary in your PATH
 wdio config 
 // or. from the root of your project
 ./node_nodules/.bin/wdio config

以上内容将在您的项目根目录中生成wdio.conf.js 文件。测试运行程序将使用它来运行您的测试用例。测试运行程序还抽象了您的 .client() 的初始化，您将不再需要处理它。只需选择一个框架来运行您的测试用例（Mocha、Cucumber 或 Jasmine）并开始编写您的测试。

注意：从现在开始，browser 将成为您的驱动程序对象。 此外，请确保您已将 wdio.conf.js 文件配置为支持这种运行测试用例的方式：设置同步标志以支持这种方式：sync: true。您可以通过wdio wdio.conf.js 命令运行您的测试。

您的测试应该如下所示（使用 Mocha）：

 var expect = require('chai').expect;

 describe("Testing Robots Emporium Test Suite", function() 

     beforeEach(function() 
         // ==> Your setup here <==
         browser.url('http://www.kevinlamping.com/webdriverio-course-content/index.html')
         var currentUrl = browser.getUrl();
         expect(currentUrl).include("/index.html");        
     )

     it("The FAQs was rendered properly", function() 

         var height = browser.getCssProperty("ul.accordion", 'height');
         // Added a debug step just to show you how easy it is to debug
         browser.debug();
         expect(height.parsed.value).to.be.above(300);
         // The first element was expanded
         var firstItemText = browser.getText('ul.accordion li:nth-of-type(1) div');
         expect(firstItemText).to.contain('be of the metal type.');
     );

     afterEach(function()  
        // ==> Your cleanup here <==
     );
 );

异步方法（使用WDIO test-runner）：

这是我的首选方法。它为您提供了对测试用例执行的最佳控制，但如果您刚刚开始，我不建议您这样做。基本上就是上面的例子，但是所有的命令都是链式的。

注意：确保您为此设置了sync: false 标志。

【讨论】：

您的评论中有几个错误，即sync: false 应该是sync: true 用于同步执行，您需要包含expect 而不是assert 并使用afterEach 进行清理，而不是beforeEach。

@M.Herold 非常感谢！你发现了错误。那天匆忙从一个项目中复制粘贴。干杯伙伴！