Testing HTML Links in Postman

By /
Testing HTML Links in Postman

In my recent project, I needed to ensure that specific links in the HTML of a webpage remained unchanged over time. I implemented a solution using Postman, which allows me to run tests on the page’s HTML response and verify the presence of these links. Here’s how I approached the task.

Steps to Set Up Postman for Testing

  1. Inspect the Network:
    • Open your web browser and navigate to the webpage you want to test.
    • Right-click anywhere on the page and select Inspect to open the Developer Tools.
    • Click on the Network tab.
  2. Find the HTML Document:
    • Reload the page to capture all network requests.
    • In the Network panel, look for home.html (or the equivalent HTML file you want to test). This file contains the links you want to verify.
  3. Copy the Request:
    • Right-click on the home.html request and select Copy > Copy as cURL (or select Copy as Fetch if you prefer).
    • If you choose cURL, use a tool like https://curl.trillworks.com/ to convert it into Postman format.
  4. Set Up in Postman:
    • Open Postman and create a new request.
    • Select the GET method and paste the URL of the copied request into the URL field.
    • Ensure that all necessary headers (like cookies, authentication tokens, etc.) are included if required.
  5. Add the Test Script:
    • In the Postman request tab, switch to the Tests section.
    • Paste the test script to validate the presence of the correct links.

Components Tested

The following links were targeted for testing:

  1. Redeem now:
    <a href="/gb/en/shop/iqos-iluma-one-starter-kit.html" class="btn-slate-white" data-rte-text="Primary slate / white">Redeem now</a>
  2. All devices:
    <a href="/gb/en/discover-heated-tobacco/iluma-starter-kits.html" class="btn-outline-slate-slate" data-rte-text="Secondary slate / slate">All devices</a>
  3. Buy now (multiple instances):
    <a href="/gb/en/shop/iqos-iluma-one-starter-kit.html" class="btn-slate-turquoise" data-rte-text="Primary slate / turquoise">Buy now</a>
    <a href="/gb/en/shop/iqos-iluma-prime-starter-kit.html" class="btn-slate-turquoise" data-rte-text="Primary slate / turquoise">Buy now</a>
  4. Discover all benefits:
    <a href="/gb/en/iqos-heated-tobacco-benefits.html" class="btn-slate-turquoise" data-rte-text="Primary slate / turquoise">Discover all benefits</a>
  5. About Heated Tobacco:
    <a href="/gb/en/discover-heated-tobacco.html" class="btn-outline-slate-turquoise" data-rte-text="Secondary slate / turquoise">About Heated Tobacco</a>
  6. Shop now:
    <a href="/gb/en/discover-heated-tobacco/buy-terea.html" class="btn-slate-white" data-rte-text="Primary slate / white">Shop now</a>

Postman Test Solution

To validate the presence of these links in the HTML response, I used the following Postman test script:

// Extract the response body as text
const responseBody = pm.response.text();

// Define the expected links with corresponding text and href values
const expectedLinks = {
    "Redeem now": "/gb/en/shop/iqos-iluma-one-starter-kit.html",
    "All devices": "/gb/en/discover-heated-tobacco/iluma-starter-kits.html",
    "Buy now": "/gb/en/shop/iqos-iluma-one-starter-kit.html",
    "Buy now (duplicate)": "/gb/en/shop/iqos-iluma-one-starter-kit.html", // for the duplicate
    "Buy now (prime)": "/gb/en/shop/iqos-iluma-prime-starter-kit.html",
    "Discover all benefits": "/gb/en/iqos-heated-tobacco-benefits.html",
    "About Heated Tobacco": "/gb/en/discover-heated-tobacco.html",
    "Shop now": "/gb/en/discover-heated-tobacco/buy-terea.html"
};

// Check if each expected link is present in the response
for (const [key, value] of Object.entries(expectedLinks)) {
    pm.test(`${key} link is present`, function () {
        pm.expect(responseBody).to.include(`href="${value}"`);
    });
}

How It Works

  1. Extract Response Body: The script extracts the HTML response as text.
  2. Define Expected Links: It defines an object containing the expected link text as keys and their corresponding href attributes as values.
  3. Run Tests: A loop iterates over each expected link, asserting that the response body includes the expected href value.

Script for Exact Match

To make sure Postman accurately connects each link to its specific button, we can tweak the script to look for the complete HTML structure of each link-button pair instead of checking the href and button names separately. This approach will help Postman find the exact match, minimizing the risk of errors with duplicate links.

Here’s a revised script that verifies the full HTML structure of each link:

// Extract the response body as text
const responseBody = pm.response.text();

// Define the expected link-button combinations, ensuring both href and text content match exactly
const expectedElements = {
    "Redeem now": `<a href="/gb/en/shop/iqos-iluma-one-starter-kit.html" class="btn-slate-white  " data-rte-text="Primary slate / white ">Redeem now</a>`,
    "All devices": `<a href="/gb/en/discover-heated-tobacco/iluma-starter-kits.html" class="btn-outline-slate-slate  " data-rte-text="Secondary slate / slate ">All devices</a>`,
    "Buy now": `<a href="/gb/en/shop/iqos-iluma-one-starter-kit.html" class="btn-slate-turquoise" data-rte-text="Primary slate / turquoise ">Buy now</a>`,
    "Buy now (duplicate)": `<a href="/gb/en/shop/iqos-iluma-one-starter-kit.html" class="btn-slate-turquoise" data-rte-text="Primary slate / turquoise ">Buy now</a>`,
    "Buy now (prime)": `<a href="/gb/en/shop/iqos-iluma-prime-starter-kit.html" class="btn-slate-turquoise" data-rte-text="Primary slate / turquoise ">Buy now</a>`,
    "Discover all benefits": `<a href="/gb/en/iqos-heated-tobacco-benefits.html" class="btn-slate-turquoise" data-rte-text="Primary slate / turquoise ">Discover all benefits</a>`,
    "About Heated Tobacco": `<a href="/gb/en/discover-heated-tobacco.html" class="btn-outline-slate-turquoise  " data-rte-text="Secondary slate / turquoise ">About Heated Tobacco</a>`,
    "Shop now": `<a href="/gb/en/discover-heated-tobacco/buy-terea.html" class="btn-slate-white  " data-rte-text="Primary slate / white ">Shop now</a>`
};

// Check if each exact link-button HTML structure is present in the response
for (const [key, elementHTML] of Object.entries(expectedElements)) {
    pm.test(`${key} link-button combination is present`, function () {
        pm.expect(responseBody).to.include(elementHTML);
    });
}

Explanation of the Script

  1. Expected Elements Defined by Full HTML:
    • Each expectedElements entry includes the entire HTML for the <a> tag, including the href, class, data-rte-text, and button text, ensuring we’re looking for an exact match.
  2. Single Test for Each Element:
    • Instead of checking href and button text separately, we now check for the entire HTML structure as a single unit. This confirms that both the link and its related button text are together and match exactly in the response.

Benefits

This approach ensures that Postman finds only the intended link-button combinations, reducing the risk of matching duplicate links incorrectly. If there are multiple identical links, only the one with the matching HTML structure will pass the test.

Related Posts

Scroll to Top