[KShare] API Testing with Web Page Source

Hi Community members, :wave:

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:

https://dev.azure.com/linhnguyen0979/_git/KShare_APITesting_HTMLSourcePage


If you find this article helpful, then don’t forget to leave us a like :+1: or a heart :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.

2 Likes

Thank you the Product Support team (@support.squad), Linh Nguyen (@linh.nguyen) and Thong Tran (@thong.tran) for another informative article on API Testing.

Linh Nguyen Thong Tran
Linh Nguyen (@linh.nguyen) - Product Support Manager at Katalon Thong Tran (@thong.tran) - Senior Software Engineer at Katalon
Linh is the Product Support team Manager at Katalon. She spent many years working as an Automation Testing QA before joining Katalon Product Support as a technical support expert. Based on her experiences, she usually provides consumers with highly applicable solutions. She now manages her team with a user-centric approach to guarantee customers greater success with Katalon Products. A passionate Katalon developer with a wealth of programming and testing expertise. Thong has been dedicated to providing exceptional enterprise support for the past five years, helping Katalon’s customers achieve their testing goals with ease.
2 Likes

Hi,
How would you go about using this to verify the content of a table with multiple rows based on a JSON response?

1 Like

Hi there,

Thank you very much for your topic. Please note that it may take a little while before a member of our community or from Katalon team responds to you.

Thanks!

Hi there Vega,

Welcome back to our forum. :wave:

We are going to loop in the contributors of this article here (@linh.nguyen and @thong.tran), so that they can provide you with more insights.

Thanks,
Albert