What is the best way to set a value for a variable that is asynchronous by design?

Question

What is the best way to set a value for a variable that is asynchronous by design?

I'm currently working on an Appium automation framework that is typescript based. The element locator strategy used in this framework is async due to the nature of the plugin I am using, which requires the use of await. However, I encountered some errors when trying to access the settings_button value in the methods.

Visual code indicates that findElementByText should return a promise with the following signature: (method) AppiumDriver.findElementByText(text: string, match?: SearchOptions, waitForElement?: number): Promise

export class HomeScreen extends BasePage {

settings_button = this._driver.findElementByText('Settings',10);

async isDisplayedSettings(){
    await (await this.settings_button).isDisplayed();
}

async openSettings(){
    await (await this.settings_button).click();

}

}

This setup is utilized within the mocha test framework as shown below.

describe("Firmware Update", () => {

let scanDevices: ScanDevices, genFunc: GenericFunctions, settings: SettingsScreen, homeScreen: HomeScreen;

const defaultWaitTime = 5000;
let driver: AppiumDriver;

before(async () => {
    driver = await createDriver();
    scanDevices = new ScanDevices(driver);
    homeScreen = new HomeScreen(driver);
    settings = new SettingsScreen(driver);
    genFunc = new GenericFunctions();
    await genFunc.timeDelay(10000); //Delay for the headset scan
    await scanDevices.clickHeadset();
});

after(async () => {
    await driver.quit();
    console.log("Quit driver!");
});


afterEach(async function () {
    if (this.currentTest.state === "failed") {
        await driver.logScreenshot(this.currentTest.title);
    }
});

it("should display settings option", async () => {
    assert.isTrue(await homeScreen.isDisplayedSettings(),"Option should be displayed");

});

it("should tap settings option", async () => {
    await homeScreen.openSettings();
    assert.isTrue(await settings.isDisplayeUpdatebutton(),"Expecting Settings screen to open");    

});

typescript appium

Answer 1

Answer №1

After analyzing your feedback, it appears that the warning is triggered by the promise associated with the settings_button variable.

The issue arises when an instance of HomeScreen is created but no methods are called on that instance. This means that any potential error in the settings_button promise will go unnoticed, which is considered a critical error by the nodejs team. Unfortunately, there is no way to guarantee that one of these methods will be invoked in the future within the constructor.

In your scenario, the settings_button promise always resolves before the isDisplayedSettings method is executed due to the delay in the before block.

To address this issue, you have two options for restructuring the code:

Update the initialization method to await the element query. Since async constructors are not supported, you will need to use an async factory instead. This approach is suggested for resolving the problem.
Delay the element query until it is first utilized. While functionally similar to your current implementation, this method helps prevent unhandled errors when no methods are called.

Outlined below are the proposed solutions in pseudocode:

Solution 1:

export class HomeScreen extends BasePage {
    settings_button : UIElement? = null;
    async init() {
        settings_button = await this._driver.findElementByText('Settings', 10);
    }
    static async create(driver) {
        const result = new HomeScreen(driver);
        await result.init();
        return result;
    }

    // ...
}

// ...

before(async() => {
    // ...
    homeScreen = await HomeScreen.create(driver);
    // ...
});

Solution 2:

export class HomeScreen extends BasePage {
    _settingsButtonPromise : Promise<UIElement>? = null;
    async getSettingsButton() {
        if (!this._settingsButtonPromise) {
            this._settingsButtonPromise = this._driver.findElementByText('Settings', 10);
        }
        return await this._settingsButtonPromise;
    }

    async isDisplayedSettings(){
        return await (await this.getSettingsButton()).isDisplayed();
    }

    // ...
}

Answer 2

After analyzing your feedback, it appears that the warning is triggered by the promise associated with the settings_button variable.

The issue arises when an instance of HomeScreen is created but no methods are called on that instance. This means that any potential error in the settings_button promise will go unnoticed, which is considered a critical error by the nodejs team. Unfortunately, there is no way to guarantee that one of these methods will be invoked in the future within the constructor.

In your scenario, the settings_button promise always resolves before the isDisplayedSettings method is executed due to the delay in the before block.

To address this issue, you have two options for restructuring the code:

Update the initialization method to await the element query. Since async constructors are not supported, you will need to use an async factory instead. This approach is suggested for resolving the problem.
Delay the element query until it is first utilized. While functionally similar to your current implementation, this method helps prevent unhandled errors when no methods are called.

Outlined below are the proposed solutions in pseudocode:

Solution 1:

export class HomeScreen extends BasePage {
    settings_button : UIElement? = null;
    async init() {
        settings_button = await this._driver.findElementByText('Settings', 10);
    }
    static async create(driver) {
        const result = new HomeScreen(driver);
        await result.init();
        return result;
    }

    // ...
}

// ...

before(async() => {
    // ...
    homeScreen = await HomeScreen.create(driver);
    // ...
});

Solution 2:

export class HomeScreen extends BasePage {
    _settingsButtonPromise : Promise<UIElement>? = null;
    async getSettingsButton() {
        if (!this._settingsButtonPromise) {
            this._settingsButtonPromise = this._driver.findElementByText('Settings', 10);
        }
        return await this._settingsButtonPromise;
    }

    async isDisplayedSettings(){
        return await (await this.getSettingsButton()).isDisplayed();
    }

    // ...
}

What is the best way to set a value for a variable that is asynchronous by design?

Answer №1

Similar questions

Instead of showing the data in the variable "ionic", there is a display of "[object object]"

Working with JSON data in AngularJS2's templates

What steps do I need to take to integrate the Firebase Admin SDK into my Angular project?

Error: To execute NPX command locally from Google Maps API documentation, make sure to call npm.load(callback) as required

How do I add a new item to an object using Ionic 2?

Is OnPush Change Detection failing to detect state changes?

Exploring async componentDidMount testing using Jest and Enzyme with React

The dropdown cannot be disabled because it is being passed as an input parameter

What are some ways to specialize a generic class during its creation in TypeScript?

Is there a way to insert a secured page right before accessing the dashboard?

Tips for incorporating auth0 into a vue application with typescript

Errors occur when attempting to parse Uint8Array in Typescript

Creating fixtures with Playwright is a simple process that can greatly enhance

Utilizing Angular's Dependency Injection to Provide Services to External Libraries

What are the best practices for transpiling code using Parcel-bundler?

Different ways to pass a component function's return value to a service in Angular

Struggling with TypeScript compilation in a Vue.js project? Encounter error code TS2352

Starting a fresh Angular project yields a series of NPM warnings, notably one that mentions skipping an optional dependency with the message: "npm

"Experience the power of utilizing TypeScript with the seamless compatibility provided by the

execute the function once the filereader has completed reading the files