Wait for Components

Learn how to wait for web components with BELLATRIX web module.

Example

@Test
async blogPageOpened_When_PromotionsButtonClicked() {
    await this.app.navigation.navigate('https://demos.bellatrix.solutions/');
    const blogLink = this.app.create(Anchor).byLinkText('Blog');
    await blogLink.wait.toBeClickable();
    await blogLink.wait.toBeVisible();
    await blogLink.click();
}

Explanations

await blogLink.wait.toBeClickable();
await blogLink.wait.toBeVisible();

If there is a condtion you want to wait to be fulfilled before proceeding with the test, you can use the WaitService of the components.

All Available toBe Methods

toExist

await this.app.create(Anchor).byLinkText("Blog").wait.toExist();

Waits for the component to exist on the page. BELLATRIX always does it by default, before each method against the element.

toBeVisible

await this.app.create(Anchor).byLinkText("Blog").wait.toBeVisible();

Waits for the component to be visible.

toBeClickable

await this.app.create(Anchor).byLinkText("Blog").wait.toBeClickable();

Waits for the component to be clickable (may be disabled at first).

toBeDisabled

await this.app.create(Anchor).byLinkText("Blog").wait.toBeDisabled();

Waits for the component to be disabled (may be clickable at first).

toNotBeVisible

await this.app.create(Anchor).byLinkText("Blog").wait.toNotBeVisible();

Waits for the component to be invisible.

toNotExist

await this.app.create(Anchor).byLinkText("Blog").wait.toNotExist();

Waits for the component to disappear. Usually, we use in assertion methods.