Blog We love to talk!

Apr Fri

How To Create Cross Browser Compatible Selenium Tests

  •  4-13-2018
Cross Browser Selenium Tests

In this post, we will take a look at what you need to know to make sure that your Selenium tests can run in different browsers.

Selectors You Should Avoid

You can use a lot of different selectors to identify elements during your tests. Unfortunately, not all selectors work well across different browsers.

Especially the XPath and link/link text selectors make problems in some browsers so, if possible, you should avoid these. The below code example shows what not to do:

  • // Avoid these for cross browser compatible tests
    WebElement element = driver.findElement(By.linkText("Click Here"));
    WebElement element2 = driver.findElement(By.partialLinkText("Click"));
    WebElement element3 = driver.findElement(By.xpath("/bookstore/book/title"));
    

  • // Avoid these for cross browser compatible tests
    IWebElement element = driver.FindElement(By.LinkText("Click Me"));
    IWebElement element2 = driver.FindElement(By.PartialLinkText("Click"));
    IWebElement element3 = driver.FindElement(By.XPath("/bookstore/book/title"));
    

  • # Avoid these for cross browser compatible tests
    element = @driver.find_element(:link => 'Click Me')
    element2 = @driver.find_element(:partial_link_text  => 'Click')
    element3 = @driver.find_element(:xpath => '/bookstore/book/title')
    

  • # Avoid these for cross browser compatible tests
    element = self.driver.find_element_by_link_text('Click Me')
    element2 = self.driver.find_element_by_partial_link_text('Click')
    element3 = self.driver.find_element_by_xpath('/bookstore/book/title')
    

  • // Avoid these for cross browser compatible tests
    var element = await driver.findElements(webdriver.By.linkText('Click Me'));
    var element2 = await driver.findElement(webdriver.By.partialLinkText('Click'));
    var element3 = await driver.findElement(webdriver.By.xpath('/bookstore/book/title'))
    

Anticipate Performance Differences

As you surely know different browsers render and execute pages with different speed. This means that you should avoid hard-coding any kind time limit into your tests. So if you need to wait for some action to happen in your tests it is advisable to use element or context-specific waits instead of a simple timespan. The example below shows how you can wait for an element to become clickable.

  • // Create a new WebDriver wait object that will wait up to 5 seconds
    WebDriverWait wait = new WebDriverWait(driver, 5);
            
    // Instruct Selenium to wait until the element is clickable
    wait.until(ExpectedConditions.elementToBeClickable(By.id("button")));
    

  • // Create a new WebDriverWait object that will wait up to 5 seconds
    WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(5));
    
    // Instruct Selenium to wait until the element is clickable
    wait.Until(ExpectedConditions.ElementToBeClickable(By.Id("button")));
    

  • # Create a new WebDriverWait object that waits up to 5 seconds
    wait = Selenium::WebDriver::Wait.new(:timeout => 5)
    
    # Instruct Selenium to wait until it can find the element
    button = wait.until { @driver.find_element(:id => "button") }
    

  • # Instruct Selenium to wait up to 5 seconds
    # Until the element is available
    button = WebDriverWait(self.driver, 5).until(
            EC.presence_of_element_located((By.ID, 'button'))
    )
    

  • // Instruct Selenium to wait up to 5 seconds for the element
    var button = await driver.wait(until.elementLocated(webdriver.By.id('button')), 5000);
    await button.click();
    

Internet Explorer And DropDowns

Some versions of Internet Explorer seem to have particular problems with DropDown menus. If you run into any of these issues you might be able to resolve them by using a CSS selector for selecting an option out of the DropDown menu.

The code example below does shows you how to do this:

  • WebElement option = driver.findElement(By.cssSelector("#option2"));
    option.click();
    

  • IWebElement option = driver.FindElement(By.CssSelector("#option2"));
    option.Click();
    

  • option = @driver.find_element(:css => '#option2')
    option.click
    

  • option = self.driver.find_element_by_css_selector('#option2')
    option.click()
    

  • var option = await driver.findElement(webdriver.By.css('#option2'));
    await option.click();
    

Browser Window Size Matters

If you are testing any kind of responsive page with your Selenium tests you need to make sure that everything you want to interact with is visible on the page during the test. This is because Selenium will reject any action that interacts with an element that is not really visible to the user.

To ensure that all elements are visible you can either maximize the browser at the beginning of the test or set a specific screen size. The example below shows you both ways:

  • // maximize the browser window
    driver.manage().window().maximize();
    
    // set a specific window size
    driver.manage().window().setSize(new Dimension(1024, 768));
    

  • // Maximize the browser window
    driver.Manage().Window.Maximize();
    
    // Set specific browser size
    driver.Manage().Window.Size = new System.Drawing.Size(1024, 768);
    

  • # Maximize the browser window        
    @driver.manage.window.maximize
    
    # Set a specific browser size
    target_size = Selenium::WebDriver::Dimension.new(1024, 768)
    @driver.manage.window.size = target_size
    

  • # Maximize the browser window
    self.driver.maximize_window()
    
    # Set a specific browser size
    self.driver.set_window_size(480, 320)
    

  • // Maximize the browser window
    await driver.manage().window().maximize();
    
    // Set a specific browser size
    await driver.manage().window().setSize(1024, 768);
    

Summary

Keeping the above steps in mind you can make sure that your tests run in all major browsers without any problem.s

Want to know more about Selenium? Check out the full course with 30+ lessons and screencasts over at http://selenium.academy.

No Comments

Leave a Reply

Your email address will not be published.