How To Create Cross-Browser Compatible 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:

C#

// 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"));

Ruby

# 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')

Python

# 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')

JAVA

// 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"));

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.

C#

// 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")));

Ruby

# 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") }

Python

# 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'))
)

JS

// 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:

C#

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

Ruby

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

Python

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

JS

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:

C#

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

Ruby

# 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

Python

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

JS

// 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.