July 9th, 2015 by inflectra
One of the features of Rapise, is an integrated Web Spy, also known as a DOM Browser. It's similar to the tools already in the web browsers such as IE, Firefox and Chrome (e.g. Firebug), but unlike using those tools it has lots of nifty features for making web testing easier and also integrates directly into Rapise testing IDE so that you can code against any of the elements visible in the Spy. This article describes how to use the Spy.
This article demonstrates how you can use Rapise to inspect the objects in a web page and Learn them for testing. This is useful in cases where you have more complex applications to test and you need to pick specific objects. For example you may want to select one of the books in the grid based on its name rather than its row number (which may change if you add books).
In the main Test ribbon of Rapise, expand the dropdown list for the ‘Spy’ tool and make sure that ‘Web Object’ is selected:
Now, click on the main ‘Spy’ tool icon and Rapise will start the Web Spy:
Go back to the web page and login to the library information system with the same login/password (librarian/librarian) and click on the ‘Book Management’ menu item so that the list of books is displayed:
Now back in the Web Spy, click on the ‘Get Snapshot’ option to refresh the Web Spy and display the HTML elements (called the DOM tree) that make up this page:
Once it has loaded the DOM tree, you can expand/collapse the elements to see how the web page is constructed. This is useful when testing an application since many of the HTML elements on a page may be used for layout purposes and will not be visible in the browser. In the example page, we have expanded some of the nodes to display the main section of the page and the table that contains the list of books.
In addition, you can use the Track (Ctrl+T) tool to select and item in the web page and then have it be highlighted in the DOM tree. For example if we want to find the cell that contains the book title “Amsterdam”, simply click CTRL+T on the keyboard, move the mouse over the cell in the webpage, wait until the red highlighting rectangle appears and then click CTRL+T again. Rapise will now highlight that item in the DOM Tree automatically:
You can see all of the properties of this HTML element displayed on the right, specifically:
· The tagName is displayed as ‘TD’ (always upper case)
· The innerHTML of the element is displayed (Amsterdam)
· The CSS and XPath for locating this element is displayed
If you want to use this object in a Rapise test script, you can simply click the Learn button and the HTML element will be added to the Recording Activity Dialog:
Click Finish and the object will have been added to your test’s Object Tree:
You can now expand this object and drag a test function to your test script. For example if you wanted to get the textual value of the cell in your test, drag the “GetInnerText” function into your test script:
In addition to letting Rapise automatically learn the object from the Web Spy, you can manually enter in XPATH or CSS queries to find matching elements on the page and then learn those for use in your test.
For example, suppose we want to dynamically find the row that has the cell containing Amsterdam and then click on its Edit hyperlink.
Open up the Web Spy as before:
In the Locators section of the Web Spy, enter in the following to locate the table:
//table[@id='MainContent_grdBooks']
Now click on the Test XPath button to display the matching results:
Now that we have matched the table, we need to add dynamic XPath to find any row that has the cell containing ‘Amsterdam’ and find the edit link. You can expand the table and see the rows and cells visually and that will help us create the XPATH:
//table[@id='MainContent_grdBooks']//tr/td[text()='Amsterdam']/../td[5]/a
This XPath consists of the following elements:
1. Finds the table with the specified ID
2. Find any row inside that table that contains a cell with the text ‘Amsterdam’
3. For any matching cell, get its parent row and inside the fifth cell, get any hyperlink
In this case that will correctly locate the Edit link for the book ‘Amsterdam’. Now that we have the correct item identified, click on the ‘Learn’ button to the right of the ‘Test XPath’ button. That will now learn a new object that corresponds to the ‘Edit Amsterdam’ object:
Click Finish and the object will have been added to the Object Tree of the current test:
To click on this object, simply drag the ‘DoClick’ function for the new object from the Object Tree into the test script. This will cause the book details page for Amsterdam to be display during test playback:
Since clicking on the Edit link will take you to a different page than where the ‘Create New Book’ link is available, in the example we have added a second instance of the:
SeS('Book_Management').DoClick();
Command, so that Rapise goes back to the main book list page before executing the Create New Book step. If we did not do this, the test would have failed.
Now the line:
SeS('Amsterdam').GetInnerText();
by itself does not do anything, it just gets the text.
So to make the test more useful, we can use the global Tester object to add a step to verify this value. Drag the “AssertEqual” function from the Tester object to your test script just above the SeS(“Amsterdam”) line:
Now we need to just consolidate these two lines into the actual test. Using the script editor, change the two lines from:
Tester.AssertEqual('', null, null);
SeS('Amsterdam').GetInnerText();
To
Tester.AssertEqual('The values match', 'Amsterdam', SeS('Amsterdam').GetInnerText());
Now click Play to playback the new test:
The test should now pass successfully.
We hope this blog was useful to you.
If you'd like to take Rapise for a spin, feel free to sign up for your 30-day free trial (no credit card required).
spy dom browser css xpath web testing Rapise test automation automated testing
Ask an Inflectra expert:
And if you have any questions, please email or call us at +1 (202) 558-6885
SpiraTest combines test management, requirements traceability & bug-tracking
SpiraTeam brings your teams together, managing the entire application lifecycle
SpiraPlan lets you manage your programs and portfolio of projects like never before
Orchestrates your automated regression testing, functional, load and performance
The ultimate test automation platform for web, mobile, and desktop applications
The help desk system, designed specifically for software support teams
Cloud hosted, secure source code management - Git and Subversion
Exploratory testing capture tool that automatically records your testing activity
Let us deal with the IT pain so you don't have to. Or use on-premise if you prefer.
Our customers work in every industry imaginable. From financial services to healthcare and biotech to government and defense and more, we work with our customers to address their specific needs.
Our products do not enforce a methodology on you, instead they let you work your way. Whether you work in agile development, Scrum and XP, Kanban and Lean, Waterfall, hybrid, or Scaled Agile Inflectra can help.
If you want to learn more about application delivery, testing, and more take a look at our whitepapers, videos, background papers, blog, and presentations.
Customers use our tools to help automate repetitive tasks and streamline their business processes using our Robotic Process Automation (RPA) solutions.
We collaborate with a wide range of teams to bring our customers a range of services (including load testing, training, and consultation), complimentary technologies, and specialized tools for specific industries.
Learn how different organizations have benefited from using Inflectra products to manage their software testing and application develooment.
Outstanding support is the foundation of our company. We make support a priority over all other work. Take a look at our support policy.
Discover great tips, discussions, and technical solutions from fellow customers and Inflectra's technical experts.
If you can't find the answer you're looking for, please get in touch with us: over email, phone, or online.
We are constantly creating new videos to help customers learn about our products, including through in depth webinars, all freely available along with a wide selection of presentations.
We provide a number of resources to help customers learn how to get the most out of our products, with free online resources, virtual classrooms, and face to face.
Read about Inflectra, our manifesto, and values. Meet our incredible customers who are building awesome things, and our leadership team that are committed to building a great company.
The Inflectra Blog contains articles on all aspects of the software lifecycle.
In addition we have whitepapers,
background articles, videos and
presentations to help get you started.
Events are a big part of our awesome customer service. They are a chance to learn more about us, our products, and how to level up your skills with our tools.
We partner with educational institutions and individuals all over the world. We are also a great place to work and encourage you to explore joining our team.
Please contact us with your questions, feedback, comments, or suggestions. We'll get back to you as soon as possible.
When you need additional assistance (be it training, consulting, or integration services) our global certified solution provider partner network is ready to help.
At Inflectra, we are fully committed to provide our customers with the very best products and customer service. Check out some of our recent awards.
We want to help developers extend and customize our tools to fit in with their needs. We provide robust APIs, sample code, and open source projects.