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:
- 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.
- 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 ininput.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")
- 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();")
- 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
(atextarea
tag with an ID of transcript).
Use theContain
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");
Comments
0 comments
Please sign in to leave a comment.