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

The type 'RefObject<HTMLDivElement>' cannot be matched with type 'RefObject<HTMLInputElement>' in this context

Is there a way to locate all projects impacted by `nx`?

registering a back button action in Ionic2 for multiple pages

Comparison between Destructuring in TypeScript and JavaScript

When using the .concat method on an array, props may display as unidentified

Struggling to get the bindings to work in my Angular 2 single-page application template project

Implementing Default Language in Next.js 14 for Static Export without URL Prefix: A Step-by-Step Guide

Vercel seems to be having trouble detecting TypeScript or the "@types/react" package when deploying a Next.js project

Creating an array of objects data is a breeze with Vue.js

Reorganize code in JavaScript and TypeScript files using VSCode

Angular functions fail to update the loop variable

Guide to developing a versatile Icon Wrapper component for FontAwesome Icons in React that adapts to changing needs

Combining Repetitive Elements in an Array

Using the tensorflow library with vite

Is it possible to meet the requirements of a specific interface using an enum field as the criteria?

Error: Attempting to access the value property of a null object within a React Form is not possible

Invalid sequencing of Nest.js async onModuleInit causing issues

Is it necessary to use ReplaySubject after using location.back() in Angular 6 to avoid requesting data multiple times?

"Can you share a method to extract the value from a TextField component in a React hook-based Material-

Issue encountered while conducting tests with Jest and React Testing Library on a React component containing an SVG: the type is not recognized in React.jsx