执行函数取决于哪个异步调用首先返回

Question

在为登录流程运行 UI 测试时，用户可能已经登录。如果用户已登录，则需要先执行注销。

在这种情况下，我必须等待登录或退出按钮出现，但我不知道哪个会出现。我想简单地等待一个或另一个出现，然后根据哪个先返回执行一个操作。

我只是在尝试注销时添加了一个静默失败。如果操作超时，脚本只是继续部分进入日志。

如果发生超时，尝试注销并让它失败：

        try {
            const profileIconLocator = By.css('.frontpage-menu-item-icon-profile');
            await browser.wait(Until.elementIsVisible(profileIconLocator));
            const profileIcon = await browser.findElement(profileIconLocator);
            assert.ok(await profileIcon.isDisplayed(), 'Ordbog profile icon button is visible');
            await profileIcon.click();

            const logOutLinkLocator = By.css('.frontpage-menu-dropdown-tools-item:nth-child(3)');
            await browser.wait(Until.elementIsVisible(logOutLinkLocator));
            const logOutLink = await browser.findElement(logOutLinkLocator);
            assert.ok(await logOutLink.isDisplayed(), 'Log out link is visible');
            await logOutLink.click();
        } catch (error) {
            console.log("LogOutStep: Failed to log out before logging in", error);
        }

然后尝试登录假设测试用户已注销：

        let signInButtonLocator = By.css('.frontpage-menu-item-icon-signin');
        await browser.wait(Until.elementIsVisible(signInButtonLocator));

        const signInButton = await browser.findElement(signInButtonLocator);
        assert.ok(await signInButton.isDisplayed(), 'Sign in button is visible');
        await signInButton.click();

我希望用户在登录之前始终注销，但是对于 UI 测试来说，在每个测试用户的第一次注销尝试中必须等待超时并不理想。

理想的结果是我可以等待两个异步调用中的任何一个返回，在返回时取消另一个，然后执行如下函数：

// Wait for this to execute first(log out button)
            const profileIconLocator = By.css('.frontpage-menu-item-icon-profile');
            await browser.wait(Until.elementIsVisible(profileIconLocator));

// or this (sign in button)

        let signInButtonLocator = By.css('.frontpage-menu-item-icon-signin');
        await browser.wait(Until.elementIsVisible(signInButtonLocator));

// If sign in button shows first, run login
// If sign out button shows first, perform log out, then login again.

Answer 1

我可能试图过分简化问题，但我想您可以使用这样的模式，仅当另一个异步函数尚未解决时，有条件地对每个异步函数的结果进行操作：

// Set flags
let firstPromiseResolved = false;
let secondPromiseResolved = false;    

// Start asynchronous functions
firstPromise(resolve, reject).then(function(firstResult){
  if(secondPromiseResolved === false){
    // Maybe we want to use firstResult for some purpose here?
    firstPromiseResolved = true; // Set flag so the other function won't log us out
    login(); // Do the thing
  }
}
secondPromise(resolve, reject).then(function(secondResult){
  if(firstPromiseResolved === false){
    // Maybe we want to use secondResult for some purpose here?
    secondPromiseResolved = true; // Set flag so the other function won't log us in
    logoutAndlogin(); // Do the other thing
  }
}

Answer 2

我最终通过使用等待一个或另一个 CSS 类的第一个实例的多查询选择器来解决它。所以在这里我等待登录按钮或注销按钮首先出现，然后根据出现的元素的类进行操作：

    const profileIconOrSignInButtonLocator = By.css('.frontpage-menu-item-icon-profile, .frontpage-menu-item-icon-signin');
    await browser.wait(Until.elementIsVisible(profileIconOrSignInButtonLocator));
    const loginOrLogoutButton = await browser.findElement(profileIconOrSignInButtonLocator);
    var elementClass = await loginOrLogoutButton.getAttribute('class');

    if (elementClass === 'frontpage-menu-item-icon frontpage-menu-item-icon-signin') {
        console.log("Simply log in");
        await loginFrontPage(browser);
    } else { // If this happens we're already logged in, and need to log out first.
        console.log("Log out and then log in");
        await logoutFrontPage(browser);
        await loginFrontPage(browser);
    }