Hi Community members, 
Are you looking for a way to validate the web page elements with API requests?
If so, then this article is for you. Let us show you how you can do so with the below scenario…
- Step 1: Go to the URL: Forms Complete Example
- Step 2: Get the title of the web page
- Step 3: Get the placeholder value of the Email field
- Step 4: Verify that the value of the placeholder matches the expected content
Step 1: Create a Web Service Request
Now, checking the response, you will see the HTML tags:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Forms Complete Example
</title>
<style type="text/css">
body {
margin: 2em 5em;
font-family:Georgia, "Times New Roman", Times, serif;
}
h1, legend {
font-family:Arial, Helvetica, sans-serif;
}
label, input, select {
display:block;
}
input, select {
margin-bottom: 1em;
}
fieldset {
margin-bottom: 2em;
padding: 1em;
}
fieldset fieldset {
margin-top: 1em;
margin-bottom: 1em;
}
input[type="checkbox"] {
display:inline;
}
.range {
margin-bottom:1em;
}
.card-type input, .card-type label {
display:inline-block;
}
</style>
</head>
<body>
<form id="register">
<h1>Register for Miss Bakers Space Cadets
</h1>
<fieldset>
<legend>Personal details
</legend>
<div>
<label>First Name
<input id="given-name" name="given-name" type="text" placeholder="First name only" required autofocus>
</label>
</div>
<div>
<label>Last Name
<input id="family-name" name="family-name" type="text" placeholder="Last name only" required autofocus>
</label>
</div>
<div>
<label>Date of Birth
<input id="dob" name="dob" type="date" required>
</label>
</div>
<div>
<label>Email
<input id="email" name="email" type="email" placeholder="example@domain.com" required>
</label>
</div>
<div>
<label>URL
<input id="url" name="url" type="url" placeholder="http://mysite.com">
</label>
</div>
<div>
<label>Telephone
<input id="phone" name="phone" type="tel" placeholder="Eg. +447000 000000" required>
</label>
</div>
<div>
<label>Shoesize
<input id="shoes" name="shoes" type="number" min="5" max="18" step="0.5" value="9">
</label>
</div>
<div>
<label>Flying Skill level (1 low - 100 high)
<input id="skill" name="skill" type="range" min="1" max="100" value="0">
<output name="output" onforminput="value=a.value">0
</output>
</label>
</div>
</fieldset>
<fieldset>
<legend>Billing address
</legend>
<div>
<label>Address
<textarea id="address" name="address" rows=5 required>
</textarea>
</label>
</div>
<div>
<label>Post code
<input id="postCode" name="postCode" type="text" required>
</label>
</div>
<div>
<label>Country
<input id="country" name="country" list="country-names" type="text" required>
<datalist id="country-names">
<option label="England" value="England">
</option>
<option label="Northern Ireland" value="Northern Ireland">
</option>
<option label="Ireland" value="Ireland">
</option>
<option label="Scotland" value="Scotland">
</option>
<option label="Wales" value="Wales">
</option>
</datalist>
</label>
</div>
</fieldset>
<fieldset>
<legend>Card details
</legend>
<fieldset>
<legend>Card type
</legend>
<div class="card-type">
<input id="visa" name="cardtype" type="radio">
<label for="visa">VISA
</label>
<input id="mastercard" name="cardtype" type="radio">
<label for="mastercard">Mastercard
</label>
<input id="amex" name="cardtype" type="radio">
<label for="amex">AMEX
</label>
</div>
</fieldset>
<div>
<label>Name
<input id="cardName" name="cardName" type="text" placeholder="Name as it appears on your card" required>
</label>
</div>
<div>
<label>Card number
<input id="cardNo" name="cardNo" type="number" required title="The sixteen digit number across the middle of your card.">
</label>
</div>
<div>
<label>Security code
<input id="security" name="security" type="number" required pattern="[0-9]{3}" title="The last three digits on the back of your card.">
</label>
</div>
<div>
<label>Expiry Date
<input id="expiry" name="expiry" type="month">
</label>
</div>
</fieldset>
<fieldset>
<div>
<button type=submit>Place Order
</button>
</div>
</fieldset>
</form>
</body>
</html>
Step 2: Create a test case and get started interacting with the HTML tags
As always, we call the request and receive the response with the syntax below…
RequestObject requestObject = findTestObject('HTML_GetResponse')
ResponseObject response = WS.sendRequest(requestObject)
The answer text has to be parsed for documentation at this point. Why? Since the Document acts as a gateway to the DOM tree, which contains the content of any web page that has been loaded into the browser, it represents any web page.
def document = Jsoup.parse(response.getResponseText(), "UTF-8")
As you see, we use Jsoup library to parse the HTML into Document since Jsoup can parse HTML files, input streams, URLs, or even strings. It eases data extraction from HTML by offering Document Object Model (DOM) traversal methods and CSS and jQuery-like selectors.
Moreover, Jsoup can manipulate the content: the HTML element itself, its attributes, or its text.
Now, let’s validate the things we need…
//get the title of the web page
def title = document.title()
println title
//get the placeholder of the email field
def email = document.select("input[name='email']")
def placeholder_email = email.attr("placeholder")
println placeholder_email
WS.verifyNotEqual(placeholder_email, "testlicense9191@gmail.com")
Feel free to refer to the sample project below for more details:
If you find this article helpful, then don’t forget to leave us a like 
or a heart 
and share the article with your colleages and teammates.
Check out more KShare articles from us Product Support team by simply going to the support tag.
