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

Posted 2023-02-24

【中文标题】执行函数取决于哪个异步调用首先返回

【英文标题】：Execute function depending on which async call returns first

【发布时间】：2019-04-23 08:07:15

【问题描述】：

在为登录流程运行 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.

【参考方案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
  

【讨论】：

嗨猫，谢谢你的回复，我想我考虑过这种情况，但这是否仍然需要稍后的承诺在它被拒绝之前超时，并且测试可以继续？

我不这么认为。解析的第一个承诺应该能够在其.then 方法中执行您想要的任何操作。在这种情况下测试另一个 Promise 状态的唯一原因是避免采取两个冲突的操作。 （如果您想要更具体的说明，可以查看medium.com/@bluepnume/…。）

【参考方案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);