node.js - 如何使用 Webdriver IO 填充登录提示？

Question

我正在使用 OCLIF 开发 CLI .在其中一个命令中，我需要在网页上模拟几次点击(为此使用 WebdriverIO framework)。在您能够到达所需页面之前，会重定向到带有登录提示的页面。当我使用与警报相关的 WebdriverIO 方法时，例如 browser.getAlertText() , browser.sendAlertText()或 browser.acceptAlert , 我总是得到错误 no such alert .

作为替代方案，我尝试在显示登录提示的页面上获取 URL。使用 URL，我想做类似 browser.url(https://<username>:<password>@<url>) 的事情来规避提示。然而，browser.url()返回 chrome-error://chromewebdata/当我在该页面上时作为 URL。我猜是因为焦点在提示上并且没有 URL。在我登陆该页面之前，我也不知道 URL。重定向时，包含 token 的查询字符串参数被添加到我需要的 URL。

提示截图:

是否可以使用 WebdriverIO 处理这种情况？如果是这样，怎么做到的？

Answer 1

您走在正确的轨道上，可能需要进行一些微调才能使其正常工作。

首先，关于 chrome-error://chromewebdata 错误，引用 Chrome 文档:

If you see errors with a location like chrome-error://chromewebdata/ in the error stack, these errors are not from the extension or from your app - they are usually a sign that Chrome was not able to load your app.

When you see these errors, first check whether Chrome was able to load your app. Does Chrome say "This site can't be reached" or something similar? You must start your own server to run your app. Double-check that your server is running, and that the url and port are configured correctly.

很多词总结起来就是:Chrome 无法加载您在 browser.url() 命令中使用的 URL。

我自己尝试了 The Internet - Basic Auth页。它就像一个魅力。

1. 没有基本身份验证凭据的 URL:

1. 带有基本身份验证凭据的 URL:

1. 使用的代码:

  it('Bypass HTTP basic auth', () => {
    browser.url('https://admin:admin@the-internet.herokuapp.com/basic_auth');
    browser.waitForReadyState('complete');
    const banner = $('div.example p').getText().trim();
    expect(banner).to.equal('Congratulations! You must have the proper credentials.');
  });

我要做的是手动执行每个步骤，尝试在您使用的脚本中模拟相同的流程。从历史上我可以告诉你，我处理了一些 HTTP 网络应用程序，这些应用程序在发出基本身份验证 browser.url() 调用后需要刷新。

---

解决此问题的另一种方法是使用一些自定义浏览器配置文件 (Firefox | Chrome)。我知道我在 SO 的某个地方写了一个教程，但我懒得去找它。我引用了类似的帖子 here .

简而言之，在隐身窗口中手动完成基本身份验证流程(使用凭据登录)(隔离配置)。在该 session 的另一个选项卡中打开 chrome://version/ 并存储 Profile Path 的内容。该文件夹将保留您的所有 session 并保留 cookie 和其他浏览器数据。

最后，在您的 currentCapabilities 中，通过 '--user-data-dir=/path/to/更新特定于浏览器的选项以使用自定义配置文件启动 session 你的/自定义/个人资料。它应该看起来像这样:

'goog:chromeOptions': {
    args: [
        '--user-data-dir=/Users/iamdanchiv/Desktop/scoped_dir18256_17319',
    ],
}

祝你好运!