TestProject Forum
Powered by leading experts in the test automation community

Speed up tests using ID rather than CSS Selector

So I am trying to speed up my tests built using the recorder in TP then running through BrowserStack virtual Android device.

I was reading on BS site the following

  • Use fast selectors in test scripts

Among the many locators that can be used in Selenium Webdriver, it is best to use the fast ones. A few of them are:

  1. search by ID

This locator functions if the html element is carrying the id attribute. It works the fastest since it uses the document.getElementById() javascript command. This command is optimized for all browsers.

  1. NAME selector

This locator functions if the element being located has a name attribute.

  1. XPath selector

XPath selector is known for providing flexibility, but are the slowest of all selectors. This is because the browser DOM of the webpage needs to be traversed in order to find the specific element. When writing scripts, use XPath selectors as rarely as possible.

  1. CSS selector

CSS Selector is faster than XPATH but definitely lacking in terms of flexibility.

As far as possible, incorporate the strategies discussed above into the creation of Selenium test scripts. By shaping test cases in a way that makes them run faster, it reduces test times. This means bugs are identified and resolved faster. Overall, it reduces the time to push new code to production.

So My question is how to use ID instead of CSS Selector or XPATH as I only see options for
XPATH, CSS Selector, Tag Name and LInk Text. How do I add ID? Is there a setting to change?

Thanks
Marcel

I think I may have found my own answer, can someone verify

Use CSS Selector in dropdown, then figure out the ID, something similar to below

"### The different locators in Selenium are as follows:

  • By CSS ID: find_element_by_id"

Hello @marcel.bauer, TestProject is in compliance with w3c WebDriver protocol, which means we only provide the locators strategies supported by this protocol

Capture

You gave the Python code find_element_by_id as an example. Internally the webdriver converts the locator from By.ID to By.CSS_SELECTOR to comply with w3c. From GitHub

def find_element(self, by=By.ID, value=None):
    """
    Find an element given a By strategy and locator. Prefer the find_element_by_* methods when
    possible.

    :Usage:
        element = driver.find_element(By.ID, 'foo')

    :rtype: WebElement
    """
    if self.w3c:
        if by == By.ID:
            by = By.CSS_SELECTOR
            value = '[id="%s"]' % value
        elif by == By.TAG_NAME:
            by = By.CSS_SELECTOR
        elif by == By.CLASS_NAME:
            by = By.CSS_SELECTOR
            value = ".%s" % value
        elif by == By.NAME:
            by = By.CSS_SELECTOR
            value = '[name="%s"]' % value
    return self.execute(Command.FIND_ELEMENT, {
        'using': by,
        'value': value})['value']

Regarding your solution, if you already located the dropdown with css selector, what is the benefit of extracting the ID to relocate it? you already have the WebElement of the dropdown.

1 Like

First and foremost, Thank you.

It was confusion on my end, I am still learning about locators and how they work. After talking with a Dev late yesterday, I get how it searches for elements. I do appreciate the very thorough explanation.

What I was basically trying to do is see if there was a way for me to speed up my tests a bit, by using the best and most accurate selector. I think I got it going.

Again I really appreciate it and you all are amazing.

Thanks
Marcel