More advanced test example: test twitter!

Tutorial description

In this tutorial we will create more advanced test-case for Twitter. We'll test two twitter use-cases: changing background and sending tweets. Let's start from changing background test and define steps:

Test changing background

  • Go to twitter.com
  • Login, enter username and password
  • Go to settings page and change background
  • Return background to previous state
  • Logout


Test sending tweets

Second test will do following steps:

  • Go to twitter.com
  • Login, enter username and password
  • Post two tweets
  • Select favorite tweet and check it
  • Delete created tweets
  • Logout

As you see, both tests have common steps: go to twitter.com, login, logout, and other. In this tutorial we'll use <before>, <after> and <frame> features to avoid copy-pasting. Also we'll periodically save screenshots and snapshots (html content of the page) and record test video.

1. Navigate and login to twitter.com

From previous tutorial you know how to create test-case, test and navigate to web-page. In this example we leave this behind the scenes. We start from login to twitter using <field id="signin-email" textToType="userjazzteam@gmail.com"/> and <field id="signin-password" textToType="9xANjIXML8"/> and then click to 'Submit' button <button xpath="//div[@id='front-container']//td[@class='flex-table-secondary']/button[@type='submit']"/>. Here we put this commands to <before> section. This commands will be executed before our test runs.

  1. <!--?xml version="1.0" encoding="UTF-8"?-->
  2.  
  3. <!-- before each run of the test performed login -->
  4.  
  5. <!-- go to twitter.com -->
  6.  
  7. <!-- write text "login" in text field -->
  8.  
  9. <!-- write text "password" in text field -->
  10.  
  11. <!-- press the button to log in -->
  12.  
  13. <button>
  14. </button>
  15.  
  16. <!-- put your code here -->
  17.  
  18.  

2. Adding logout step

Before we run our test we add logout step. This allows us to concentrate on business logic in our test, but not on authorization details. For logout logic we use <after> feature. Logout code will be executed after test finish.

  1.  
  2. <!-- before each run of the test performed login -->
  3.  
  4. <!-- go to twitter.com -->
  5.  
  6. <!-- write text "login" in text field -->
  7.  
  8. <!-- write text "password" in text field -->
  9.  
  10. <!-- press the button to log in -->
  11.  
  12. <button>
  13. </button>
  14.  
  15. <!-- put your code here -->
  16.  
  17. <!-- logout -->
  18.  
  19.  

3. Change twitter background

Now it's time for change twitter background. This operation will be used two times: for change and for return back. XML2Selenium has powerful feature called frames. We can put common code to frame and then re-use this code in our tests. To put theme id into frame we use <variable>. Our frame will look this way:

  1.  
  2.  
  3. <!-- press the setting button to open menu -->
  4. <button id="user-dropdown-toggle"></button>
  5. <!-- press the settings button to open settings menu -->
  6.  
  7. <!-- chose design menu -->
  8.  
  9. <!-- chose new theme (theme number 14) -->
  10.  
  11. <!-- save settings -->
  12. <button id="settings_save"></button>
  13.  
  14.  

This code changes background by clicking several buttons. To make frame reusable we will pot it into separate text file, called "ImportFile for twitter.xml". File contents is listed below:

  1.  
  2.  
  3. <!-- press the setting button to open menu -->
  4. <button id="user-dropdown-toggle"></button>
  5. <!-- press the settings button to open settings menu -->
  6.  
  7. <!-- chose design menu -->
  8.  
  9. <!-- chose new theme (theme number 14) -->
  10.  
  11. <!-- save settings -->
  12. <button id="settings_save"></button>
  13.  
  14.  

Then we'll include this import to our test and call this code, also add videorecording:

  1. <!--?xml version="1.0" encoding="UTF-8"?-->
  2.  
  3. <!-- before each run of the test performed login -->
  4.  
  5. <!-- go to twitter.com -->
  6.  
  7. <!-- write text "login" in text field -->
  8.  
  9. <!-- write text "password" in text field -->
  10.  
  11. <!-- press the button to log in -->
  12.  
  13. <button>
  14. </button>
  15.  
  16. <!-- set the background of the page -->
  17.  
  18. <!-- set the background of the page -->
  19.  
  20. <!-- logout -->
  21.  
  22.  

4. Sending tweets

For sending tweets we implement another test. This helps us to split different logical tests. For this test we implement three new frames and put them into "ImportFile for twitter.xml":

  1.  
  2.  
  3. <!-- create first tweet -->
  4. <button id="global-new-tweet-button"></button>
  5.  
  6. <button>
  7.  
  8. <!-- select first tweet how favorite -->
  9.  
  10. </button><button>
  11.  
  12. <!-- check existing favorite tweet -->
  13.  
  14. <!-- delete first tweet -->
  15.  
  16. </button><button>
  17.  
  18. </button>

5. Putting it's all together

As a result we have following import file with frames:

  1. <!--?xml version="1.0" encoding="UTF-8"?-->
  2.  
  3. <!-- press the setting button to open menu -->
  4. <button id="user-dropdown-toggle"></button>
  5. <!-- press the settings button to open settings menu -->
  6.  
  7. <!-- chose design menu -->
  8.  
  9. <!-- chose new theme (theme number 14) -->
  10.  
  11. <!-- save settings -->
  12. <button id="settings_save"></button>
  13.  
  14. <!-- create first tweet -->
  15. <button id="global-new-tweet-button"></button>
  16.  
  17. <button>
  18.  
  19. <!-- select first tweet how favorite -->
  20.  
  21. </button><button>
  22.  
  23. <!-- check existing favorite tweet -->
  24.  
  25. <!-- delete first tweet -->
  26.  
  27. </button><button>
  28.  
  29. </button>

And following test-case with two tests:

  1. <!--?xml version="1.0" encoding="UTF-8"?-->
  2.  
  3. <!-- before each run of the test performed login -->
  4.  
  5. <!-- go to twitter.com -->
  6.  
  7. <!-- write text "login" in text field -->
  8.  
  9. <!-- write text "password" in text field -->
  10.  
  11. <!-- press the button to log in -->
  12.  
  13. <button>
  14.  
  15. </button>
  16.  
  17. <!-- set the background of the page -->
  18.  
  19. <!-- set the background of the page -->
  20.  
  21. <!-- create first tweet -->
  22.  
  23. <!-- create second tweet -->
  24.  
  25. <!-- select first tweet how favorite -->
  26.  
  27. <!-- select second tweet how favorite -->
  28.  
  29. <!-- check existing first favorite tweet -->
  30.  
  31. <!-- check existing second favorite tweet -->
  32.  
  33. <!-- delete first tweet -->
  34.  
  35. <!-- delete second tweet -->
  36.  
  37. <!-- logout -->
  38.  
  39.  

Conclusion

After executing this test we'll get following aftifacts:



Leave a Comment