Write your first test: find artist’s video on youtube

Tutorial description

In this tutorial we will create simple UI-test on XML2Selenium. This test would contain following steps:

  • Go to youtube.com webpage
  • Enter text to video search form
  • Click to search button
  • Verify that result page contains specified text

Also we’ll periodically save screenshots and snapshots (html content of the page) and record test video.

1. Creating test-case

To start we need to make a test-case and test. For now test is empty, but we’ll fill it in future steps. Test case and test have name, description and tags attributes. This attributes used by reporting tools to make user-understandable reports. You can watch report examples here.

 

<?xml version="1.0" encoding="UTF-8"?>
<testcase xmlns="https://www.jazzteam.org/Routines" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
name="video on youtube" description="Find video on youtube" tags="Basic, youtube">		  
	<test coverage="100" name="01 YouTube" description="Find the video and check that the page is present 'Like'" 
	tags="youtube, navigate, webelement, field, button" >
		<!-- Your test steps goes here -->			 
	</test>	  		  
</testcase>

2. Navigate youtube.com and enter text to search field

For all UI test first step is usually navigating to web-page. For this task <navigate to=”https://www.youtube.com/”/> command with specified url used. Also we start to record video by adding <video action=”start”/> command. After test finished we’ll have a recorded video. In case of test fail this video will help programmers to fix bugs.

 

<?xml version="1.0" encoding="UTF-8"?>
<testcase xmlns="https://www.jazzteam.org/Routines" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
name="video on youtube" description="Find video on youtube" tags="Basic, youtube">		  
	<test coverage="100" name="01 YouTube" description="Find the video and check that the page is present 'Like'" 
	tags="youtube, navigate, webelement, field, button" >
		<!-- start video recording -->
		<video action="start"/>
		<!-- go to youtube.com -->  
		<navigate to="https://www.youtube.com/"/>			 
	</test>	  		  
</testcase>

3. Enter text and press “search” button

Then we need to enter text in search field. We use <field id=’masthead-search-term’ textToType=”humor”/> for this. This command enters text ‘humor’ to field with id=’masthead-search-term’. Clicking is done using <button id=”search-btn”/> command where id attribute points to button id. Next we need to wait while page with search result loads using <pause time=”3000″/>. This command does nothing, but waits for 3000 miliseconds. Then we save screenshot and snapshot using <screenshot/> and <snapshot/> commands.

 

<?xml version="1.0" encoding="UTF-8"?>
<testcase xmlns="https://www.jazzteam.org/Routines" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
name="video on youtube" description="Find video on youtube" tags="Basic, youtube">		  
	<test coverage="100" name="01 YouTube" description="Find the video and check that the page is present 'Like'" 
	tags="youtube, navigate, webelement, field, button" >
		<!-- start video recording -->
		<video action="start"/>
		<!-- go to youtube.com -->  
		<navigate to="https://www.youtube.com/"/>

		<!-- write text "humor" in text field -->
		<field id='masthead-search-term' textToType="humor"/>
		<!-- press the button to search -->
		<button id="search-btn"/>
		<!-- put a pause to load the contents of the page -->
		<pause time="3000"/>

		<!-- create an image of the page -->
		<screenshot/>
		<!-- create a copy of the page -->
		<snapshot/>
	</test>	  		  
</testcase>

 

4. Open video clip and verify that ‘Like’ button appears

Now we are on a youtube page with search results. Next we click to first video using <webelement xpath=”//*[@id=’search-results’]/li[@data-context-item-type=’video’][1]” action=”click”/>. Do not afraid of this strange code (//*[@id=’search-results’]/li[@data-context-item-type=’video’][1]), this is additional possibility to find webpage elements using Xpath, standard language for web-development. For now just note that this Xpath expression points to first video on youtube search results page. You can read about Xpath here. It is not necessary to use Xpath, in XML2Selenium you can point to elements by their IDs, css class and tag name. After we select video, we wait for 3 seconds and check ‘Like’ button appears using <webelement xpath=”//button[@id=’watch-like’]//span[@class=’yt-uix-button-content’]” action=”isContainsText” text=”Like”/>. This command checks that pointed element contains ‘Like’ text. After checking we save screenshot and snapshot.

 

<?xml version="1.0" encoding="UTF-8"?>
<testcase xmlns="https://www.jazzteam.org/Routines" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
name="video on youtube" description="Find video on youtube" tags="Basic, youtube">		  
	<test coverage="100" name="01 YouTube" description="Find the video and check that the page is present 'Like'" 
	tags="youtube, navigate, webelement, field, button" >
		<!-- start video recording -->
		<video action="start"/>
		<!-- go to youtube.com -->  
		<navigate to="https://www.youtube.com/"/>

		<!-- write text "humor" in text field -->
		<field id='masthead-search-term' textToType="humor"/>
		<!-- press the button to search -->
		<button id="search-btn"/>
		<!-- put a pause to load the contents of the page -->
		<pause time="3000"/>
		<!-- stop video recording -->
		<video action="stop"/>

		<!-- create an image of the page -->
		<screenshot/>
		<!-- create a copy of the page -->
		<snapshot/>
		<!-- Click on the first video clip from the list -->
		<webelement xpath="//*[@id='search-results']/li[@data-context-item-type='video'][1]" 
					action="click"/>
		<!-- put a pause to load the contents of the page -->			
		<pause time="3000"/>
		<!-- check that the page is present like -->
		<webelement xpath="//button[@id='watch-like']//span[@class='yt-uix-button-content']"
					action="isContainsText" text="Like"/>  
		<screenshot/>
		<snapshot/>			 
	</test>	  		  
</testcase>

 

Conclusion

Congratulations, we completed first test on XML2Selenium! After executing this test we’ll get following aftifacts:



 

You are ready for reading more advanced tutorial with twitter testing example.

Leave a Comment