Validating XPath Expressions and CSS Selectors Locators in Internet Explorer browser using MRI

Before understanding how to use MRI for validating the XPath Expressions and CSS Selectors in Internet Explorer browser, we have to first know the different plug-ins in Firefox and Chrome browsers.

There are various plug-ins in Firefox and Chrome browsers, which will help us in auto generating and validating the XPath Expressions and CSS Selectors. If you are not aware of these plug-ins, you can refer to important ones in the below links:

• Firepath plug-in in Firefox Browser
• WebDriver Element Locator plug-in in Firefox Browser
• XPath Helper plug-in in Chrome Browser
• Relative XPath Helper plug-in in Chrome Browser

Now its time for Internet Explorer browser. Though Firefox and Chrome Browser plug-ins not only validate the locators, but also auto generate the locators. But MRI used in Internet Explorer browser will only validate the locators. Auto generation of locators is out of scope using MRI.

Before practically working with MRI, lets know the below details first:

• Supported by Internet Explorer 6 and above versions
• MRI is nothing but a JavaScript code. Will explain more on this in the below content.

Practically using MRI for validating the XPath Expressions and CSS Selectors in Internet Explorer Browser:

Lets follow the below steps for using MRI for validating the XPath Expressions and CSS Selectors in Internet Explorer browser:

1. Open Internet Explorer Browser as shown below:

2. Browse "http://westciv.com/mri/" in Internet Explorer browser as shown below:

3. Right click on the head section of Internet Explore and select 'Favorites Bar' option as shown below:

4. Observe that the Favorites bar will be displayed in Internet Explorer browser as shown below:

5. Now drag and drop the 'MRI' button on the displayed page to the Favorites bar of Browser using mouse as shown below:

6. Select 'Yes' button on the displayed confirmation dialog as shown below:

7. Observe that the MRI gets added to the Favorites bar of Browser as shown below:

8. Lets navigate to an example page and validate the XPath and CSS Selectors locators using MRI. Browse "http://www.omayo.blogspot.com" in Internet Explorer Browser as shown below:

9. Click on 'MRI' bookmarklet on the Favorites Bar of Internet Explorer browser and observe that a 'MRI' pop-up dialog will be displayed as shown below:

10. Now type the XPath Expression of 'Selenium143' link say "//a[@id='link1']" into the text box field in MRI pop-up and click on 'MRI' button as shown below:

Note: On clicking the 'MRI' button after providing the Xpath Expression, the 'Selenium143' related to the provided Xpath Expression gets highlighted on the page as shown below:

Hence we have validated whether the provided Xpath Expression is locating the required GUI element.

11. Similarly we can validate the CSS Selector of 'Selenium143' link i.e. '#link1' using MRI as shown below:

Hence we have validated whether the provided CSS Selector is locating the required GUI element.

12. Now we have understood using MRI in Internet Explorer browser, lets find out how does the MRI bookmarklet is able to validate the XPath Expressions and CSS Selectors in Internet Explorer Browser. Hover your mouse over the MRI bookmarklet on IE browser and observe that the JavaScript code which is helping us in validating the XPath Expressions and CSS Selectors locators will be displayed as shown below:

Conclusion

MRI is nothing but a bookmarklet containing the JavaScript code for validating the XPath Expressions and CSS Selectors locators in Internet Explorer Browser. If you requirement is to validate the XPath Expressions and CSS Selectors Locators in Internet Explorer browser, blindly use MRI bookmarklet.