Locate Components

Learn how to locate web components with BELLATRIX web module.

Example

    @Test
    async promotionsPageOpened_When_PromotionsButtonClicked() {
        await this.app.navigation.navigate('https://demos.bellatrix.solutions/');

        const promotionsLink = this.app.create(Anchor).byLinkText('Promotions');

        await promotionsLink.click();

        console.log(promotionsLink.getFindStrategy().getValue());

        console.log(promotionsLink.getWrappedElement().getTagName());
    }

Explanations

const promotionsLink = this.app.create(Anchor).byLinkText('Promotions');

There are different ways to locate components on the page. To do it you use the component create service. You need to know that BELLATRIX has a built-in complex mechanism for waiting for components, so you do not need to worry about this anymore. Keep in mind that when you use the create methods, the component is not searched on the page. All components use lazy loading. Which means that they are searched once you perform an action or assertion on them. By default on each new action, the component is searched again and is refreshed.

console.log(promotionsLink.getFindStrategy().getValue());

Because of the proxy component mechanism (we have a separate type of component instead of single WebDriver/Playwright WebElement/Locator interface) we have several benefits. Each control (component type – ComboBox, TextField and so on) contains only the actions you can do with it, and the methods are named properly. Also, we have some additional properties in the proxy web control such as – getFindStrategy. Now you can get the locator with which you component was found.

console.log(promotionsLink.getWrappedElement().getTagName());

You can access the native wrapped element through getWrappedElement.

Available create Methods

BELLATRIX extends the vanilla Selenium and Playwright selectors and gives you additional ones.

create().byIdEndingWith

this.app.create(Anchor).byIdEndingWith('myIdSuffix');

Searches the component by ID ending with the locator.

create().byTag

this.app.create(Anchor).byTag('a');

Searches the component by its tag.

create().byId

this.app.create(Button).byId('myId');

Searches the component by its ID.

create().byIdContaining

this.app.create(Button).byIdContaining('myIdMiddle');

Searches the component by ID containing the specified text.

create().byValueContaining

this.app.create(Button).byValueContaining('pay');

Searches the component by value attribute containing the specified text.

create().byXpath

this.app.create(Button).byXpath('//*title="Add to cart"');

Searches the component by XPath locator.

create().byCss

this.app.create(Button).byCss('[data-product_id*="28"]');

Searches the component by CSS locator.

create().byLinkText

this.app.create(Anchor).byLinkText('blog');

Searches the component by its link (href).

create().byLinkTextContaining

this.app.create(Anchor).byLinkTextContaining('account');

Searches the component by its link (href) if it contains specified value.

create().byClass

this.app.create(Anchor).byClass('product selected');

Searches the component by its CSS classes.

create().byClassContaining

this.app.create(Anchor).byClassContaining('selected');

Searches the component by its CSS classes containing the specified values.

create().byInnerTextContaining

this.app.create(Div).byInnerTextContaining('Showing all');

Searches the component by its inner text content, including all child HTML components.

create().byNameEndingWith

this.app.create(SearchField).byNameEndingWith('a');

Searches the component by its name containing the specified text.

create().byAttributeContaining

this.app.create(Anchor).byAttributeContaining('data-product_id', '31');

Searches the component by some of its attribute containing the specified value.

Find Multiple Components

Sometimes we need to find more than one component. For example, in this test we want to locate all Add to Cart buttons. To do it you can use the component create service createAll method.

@Test
async checkAllAddToCartButtons() {
    await this.app.navigation.navigate('https://demos.bellatrix.solutions/');
    
    const addButtons = this.app.create(Anchor).allByXpath('//*[@normalize-space()="Add to cart"]');
}

Available createAll Methods

create().allByIdEndingWith

this.app.createAnchorallByIdEndingWith('myIdSuffix');

Searches the components by ID ending with.

create().allByTag

this.app.create(Anchor).allByTag('a');

Searches the components by their tags.

create().allById

this.app.create(Button).allById('myId');

Searches the components by their IDs.

create().allByIdContaining

this.app.create(Button).allByIdContaining('myIdMiddle');

Searches the components by ID containing the specified text.

create().allByValueContaining

this.app.create(Button).allByValueContaining('pay');

Searches the components by value attribute containing the specified text.

create().allByXpath

this.app.create(Button).allByXpath('//*title="Add to cart"');

Searches the components by XPath locator.

create().allByCss

this.app.create(Button).allByCss('[data-product_id*="28"]');

Searches the components by CSS locator.

create().allByLinkText

this.app.create(Anchor).allByLinkText('blog');

Searches the components by their link (href).

create().allByLinkTextContaining

this.app.create(Anchor).allByLinkTextContaining('account');

Searches the components by their link (href) if it contains specified value.

create().allByClass

this.app.create(Anchor).allByClass('product selected');

Searches the components by their CSS classes.

create().allByClassContaining

this.app.create(Anchor).allByClassContaining('selected');

Searches the components by their CSS classes containing the specified values.

create().allByInnerTextContaining

this.app.create(Div).allByInnerTextContaining('Showing all');

Searches the components by their inner text content, including all child HTML components.

create().allByNameEndingWith

this.app.create(SearchField).allByNameEndingWith('a');

Searches the components by their name containing the specified text.

create().allByAttributeContaining

this.app.create(Anchor).allByAttributeContaining('data-product_id', '31');

Searches the components by some of their attributes containing the specified value.

Find Nested Components

Sometimes it is easier to locate one component and then find the next one that you need, inside it. For example in this test we want to locate the Sale! button inside the product’s description. To do it you can use the component’s create methods.

@Test
async openSalesPage_When_locatedSaleButtonInsideProductImage() {
    await this.app.navigation.navigate('https://demos.bellatrix.solutions/');

    const productColumn = this.app.create(Option).byClass('products columns-4');

    const saleButton = productsColumn.create(Anchor).byXpath('//div[class*="woocommerce-LoopProduct-link woocommerce-loop-product__link"]').create(Button).byInnerTextContaining('Sale!');

    await saleButton.click();
}

The first products row is located. Then search inside it for the first product image, inside it search for the Sale! Span element.

Note: It is entirely legal to create a Button instead of Span. BELLATRIX library does not care about the real type of the HTML elements. The proxy types are convenience wrappers so to say. Meaning they give you a better interface of predefined properties and methods to make your tests more readable.

Available create Methods for Finding Nested Components

create().byIdEndingWith

component.create(Anchor).byIdEndingWith('myIdSuffix');

Searches the component by ID ending with the locator.

create().byTag

component.create(Anchor).byTag('a');

Searches the component by its tag.

create().byId

component.create(Button).byId('myId');

Searches the component by its ID.

create().byIdContaining

component.create(Button).byIdContaining('myIdMiddle');

Searches the component by ID containing the specified text.

create().byValueContaining

component.create(Button).byValueContaining('pay');

Searches the component by value attribute containing the specified text.

create().byXpath

component.create(Button).byXpath('//*title="Add to cart"');

Searches the component by XPath locator.

create().byCss

component.create(Button).byCss('[data-product_id*="28"]');

Searches the component by CSS locator.

create().byLinkText

component.create(Anchor).byLinkText('blog');

Searches the component by its link (href).

create().byLinkTextContaining

component.create(Anchor).byLinkTextContaining('account');

Searches the component by its link (href) if it contains specified value.

create().byClass

component.create(Anchor).byClass('product selected');

Searches the component by its CSS classes.

create().byClassContaining

component.create(Anchor).byClassContaining('selected');

Searches the component by its CSS classes containing the specified values.

create().byInnerTextContaining

component.create(Div).byInnerTextContaining('Showing all');

Searches the component by its inner text content, including all child HTML components.

create().byNameEndingWith

component.create(SearchField).byNameEndingWith('a');

Searches the component by its name containing the specified text.

create().byAttributeContaining

component.create(Anchor).byAttributeContaining('data-product_id', '31');

Searches the component by some of its attribute containing the specified value.

Available createAll Methods for Finding Nested Components

create().allByIdEndingWith

component.create(Anchor).allByIdEndingWith('myIdSuffix');

Searches the components by ID ending with.

create().allByTag

component.create(Anchor).allByTag('a');

Searches the components by their tags.

create().allById

component.create(Button).allById('myId');

Searches the components by their IDs.

create().allByIdContaining

component.create(Button).allByIdContaining('myIdMiddle');

Searches the components by ID containing the specified text.

create().allByValueContaining

component.create(Button).allByValueContaining('pay');

Searches the components by value attribute containing the specified text.

create().allByXpath

component.create(Button).allByXpath('//*title="Add to cart"');

Searches the components by XPath locator.

create().allByCss

component.create(Button).allByCss('[data-product_id*="28"]');

Searches the components by CSS locator.

create().allByLinkText

component.create(Anchor).allByLinkText('blog');

Searches the components by their link (href).

create().allByLinkTextContaining

component.create(Anchor).allByLinkTextContaining('account');

Searches the components by their link (href) if it contains specified value.

create().allByClass

component.create(Anchor).allByClass('product selected');

Searches the components by their CSS classes.

create().allByClassContaining

component.create(Anchor).allByClassContaining('selected');

Searches the components by their CSS classes containing the specified values.

create().allByInnerTextContaining

component.create(Div).allByInnerTextContaining('Showing all');

Searches the components by their inner text content, including all child HTML components.

create().allByNameEndingWith

component.create(SearchField).allByNameEndingWith('a');

Searches the components by their name containing the specified text.

create().allByAttributeContaining

component.create(Anchor).allByAttributeContaining('data-product_id', '31');

Searches the components by some of their attributes containing the specified value.