Welcome to the Cyara Knowledge Center

This example is just a sample scenario to help you create a Web Test Case. The example below shows how to create a Test Case that will log in to a page, choose the option to Chat with an agent, and start a conversation.

To understand the sequence, perform the following steps:

1. Firstly, activate the tools by pressing CTRL + SHIFT + I or just right-click over the page and choose Inspect Element. You should now see the tools aligned to the bottom or right of your browser.
   
   
2. Click the magnifying glass icon in the toolbar then hover over the text box next to the Account Number field. This should highlight the field showing its dimensions and Selector.

   
   
   

   The problem with using the Selector shown, input.form-input, is that there is more than one field using this. You can confirm this by pressing CTRL + F and type the Selector in input.form-input. This should highlight the account number text box, but the find box indicates that this is 1 of 2.

   So, to uniquely identify this field, use its name, txtusername.

   The Selector now becomes:

   input.form-input[name=txtusername]

   Type this into the find box. It should show now it has matched 1 of 1.

   The first part of this step is to enter a value in this box. For this, use the SetValue function. SetValue("input.form-input[name=txtusername]", "1234")

   You can use a similar approach for the Password field. Using its name, you get a Selector of: SetValue("input.form-input[name=txtpassword]", "1234")

3. The next step is to click the Login button. To do this again, you need to right-click the button and choose Inspect Element. A Selector of a.form-button is shown. Typing this into the find box, you can see it is unique and matching 1 of 1.

   Use the FireEvent function to submit the form: FireEvent("a.form-button", "click")

   After this function executes, you are logged on to the page, but would want to confirm if you are at the right page.

   If you log in to the site with a Username of 1234 and a Password of 1234, a screen as shown below should appear:
   
   

   You can use the heading with the Welcome message to confirm if you are on the right page. Using the Matches function, verify this: Matches("H1:first-child", "Welcome Back, Marsha Thompson")

   You now need to choose from the Quick Contact drop-down box to Chat with an agent. Right-click over this input field and choose Inspect Element. You will see the unique identifier of this element is its name, so the Selector becomes select[name=quickcontact].

   As this page contains the Javascript library jQuery, you can use the following to verify:

   JavaScript("$('select[name=quickcontact]').val('Chat').change();")

4. You now need to confirm if the page is correct. The page should be on the Chat screen with an agent. This is the last step before you begin your conversation with the agent. Right-click on the box in the middle and choose Inspect Element. This should reveal a Selector for this element of textarea#transcript (a textarea tag with an ID of transcript).
   
   
   Use the Contain function to locate the text “Welcome to Premier Financial Services Chat”, as below:

   Contains(null, "Welcome to Premier Financial Services Chat", null, 
   "window.frames[0].document.querySelector('textarea#transcript').value");

   You can combine these functions together to create a Custom function to log in and navigate to the agent Chat page as follows:

   SetValue("input.form-input[name=txtusername]", "1234");
   SetValue("input.form-input[name=txtpassword]", "1234");
   FireEvent("a.form-button", "click");
   Matches("H1:first-child", "Welcome Back, Marsha Thompson"); 
   JavaScript("$('select[name=quickcontact]').val('Chat').change();"); 
   Contains(null, "Welcome to Premier Financial Services Chat", null, 
   "window.frames[0].document.querySelector('textarea#transcript').value");