javascript - 如何使用 wdio 处理弹出窗口？

Question

我正在尝试通过 webdriverio 处理 facebook 身份验证对话框弹出窗口。问题是我似乎无法针对 facebook 注册的电子邮件/密码字段。

这是我的代码:

it('redirects after signup', () => {
    browser.url('/');

    const mainTab = browser.getCurrentTabId();
    browser.waitForExist('[data-test="facebook-login-button"]');
    browser.click('[data-test="facebook-login-button"]');

    // fb login form
    browser.waitForExist('#email');
    browser.setValue('#email', this.fbAccount.email);
    browser.setValue('#pass', this.fbAccount.password);
    browser.click('input[type="submit"]');

    // fb login authorization
    browser.waitForExist('button[type="submit"]');
    browser.click('button[type="submit"]');

    browser.switchTab(mainTab);
    browser.waitForExist('[data-test="intro-title"]');
});

我还尝试通过执行以下操作等到选项卡打开

browser.waitUntil(() => browser.getUrl().indexOf('facebook.com') > -1);

另一个尝试是更明确地将标签切换到 facebook 标签

browser.switchTab(   
 browser.windowHandles().value[browser.windowHandles().value.length]
);

所有这些变体只会导致 browser.waitForExist('#email'); 失败(即超时并且在 30 秒后找不到电子邮件输入)。话虽这么说，弹出窗口确实打开了，而且确实是聚焦的。即使我手动尝试聚焦 wdio、webdriver 或 selenium 也找不到有问题的元素。

这种事情应该如何运作？我究竟做错了什么？是否有使此类测试成功的建议？

Answer 1

要完成这项工作，您实际上需要找到正确的窗口句柄。您不能保证第一个或最后一个就是您需要的那个。不过，您至少可以希望包含窗口句柄的数量。

我在fb登录表单填写代码前添加了如下代码:

// wait for popup
browser.waitUntil(() => browser.windowHandles().value.length > 1);
const popupWindow = browser.windowHandles().value.filter((handle) => handle !== mainTab)[0];
browser.switchTab(popupWindow);

这使我能够保证在继续之前处理正确的 windowHandle 焦点。我尝试总是选择第一个或最后一个窗口句柄，但这对我来说从来没有成功过。

注意:在 WDIO 5 中，您需要使用 getWindowHandle。