Selenium IDE Script Using Class Locator

Selenium IDE script

As per our last blog we have done scripting with Id and XPath locator to find any element, but whenever Id and Xpath represent dynamic value while refreshing page, We can use a class locator for the below examples :

 

  • Add photo/video to create post
  • Add comment to the post
  • Like any post added
  • Dislike any post

Here, we have described the usage of “Class locator” on your website for the above cases.

 

Steps to test upload/add photo/video file on your website with the Selenium IDE:

Scenario: As per the below image, if the user wants to add/upload the photo/video file from the website.

1

Follow the below steps:

 

Step-1:

  • Right-click on the button of photo/video.
  • Select ‘Inspect in Firebug’.
  • Select the class locator which is used for the button.
  • Copy the associated Class locator.

Step-2:

  • Go to Selenium Script table and use commands.
  • Command: click.
  • Target: CSS Class name for selected element.
Selenium

>> Or else add command in the source file as shown below.

Selenium

Steps to test Add a comment in the post on your website with the Selenium IDE:

As per the below image, if user want to add comment to the post.

3

Step-1:

  • Right click on the Comment.
  • Select ‘Inspect in Firebug’.
  • Select the associated class locator which is used for button
  • Copy showed class locator

Step-2:

  • Go to Selenium Script table and use commands.
  • Command: typeKeysAndWait
  • Target: CSS Class name for selected element
  • Value: "Test Comment"
     
4

>> Or else add command in source file like shown below.

1.2

Steps to test Like any Post added in your website with the Selenium IDE:

As per the below image, if user want to Like comment/photos in the post.

5

Step-1:

  • Right click on the Like button.
  • Select ‘Inspect in Firebug’.
  • Select the class locator which is used for button
  • Copy showed class locator

Step-2:

  • Go to Selenium Script table and use commands.
  • Command: click 
  • Target : CSS Class name for selected element
     
6

>> Or else add command in source file like shown below.

1.3

Check below example for more:

>> If the user wants to like multiple posts at a time when a user can use above-mentioned script multiple times as IDE find elements one by one after successful like.

Steps to test Dislike any Post added to your website with the Selenium IDE:

As per the below image, if user want to Dislike comment/photos in the post.

7

Step-1:

  • Right click on the Unlike/Liked button
  • Select ‘Inspect in Firebug’
  • Select the class locator which is used for button
  • Copy showed class locator

Step-2:

  • Go to Selenium Script table and use commands
  • Command: click 
  • Target : CSS Class name for selected element
     
8

>> Or else add command in source file like shown below.

1.4

Check below example for more:

>> If the user wants to dislike multiple posts at a time, then a user can use above-mentioned script multiple times as IDE find elements one by one already liked the post and dislike it successfully.

 

I hope this blog provided you with the basic knowledge of the Class locator. ou can also refer our types of testing  blog and Share your views and feedback. Feel free to drop any comments/queries.