How to Count the Number of Links on a Page

Article Overview:

This article will cover how you can achieve the following:

Guide on the methods for counting the number of links present on a webpage using an extension.

Problem Statement:

Counting the number of links on a webpage can be a crucial task in web automation, especially when verifying the presence or quantity of specific links. However, web pages often use varying structures, such as different class names or URL patterns, which makes it difficult to reliably count the links across different sites. Users need a method to automate the process of counting links based on common properties like class names or shared URL strings within Virtuoso.

This article provides two methods for counting the number of links on a webpage, enabling users to accurately perform this task regardless of the web page’s structure.

Solution:

Method 1: Counting Links with the Same Class Name

If all the links share the same class name, use the below code for extension creation:

var elements = document.getElementsByClassName("className");
var count = elements.length;
return count;

Explanation:

1. Retrieve Elements: The script finds all elements with the specified class name using getElementsByClassName("className").
2. Count Elements: It then counts these elements by checking the length property.
3. Return Count: The script returns this count.

Method 2: Counting Links with a Common String in the URL

If the class name of the links varies, but they share a common string in their URLs, use the below code for extension creation:

var container = document.getElementById("elementId").querySelectorAll('a[href*="/common_string"]');
var count = container.length;
return count;

// Alternatively:
// var container = document.querySelectorAll('#elementId a[href*="/common_string"]');

Explanation:

1. Retrieve Links: The script searches for anchor elements <a> within the specified container, identified by its unique ID. It targets links with an href attribute containing the specified string
   
2. This is done using document.getElementById("elementId").querySelectorAll('a[href*="/common_string"]').
   
3. Alternatively, the same can be achieved with
   document.querySelectorAll('#elementId a[href*="/common_string"]'), which performs a similar query directly.
   
4. Count Links: The script counts these links by checking the length property of the container variable.
   
5. Return Count: The script returns this count.

Steps to Use the Extension:

1. Go to the Extensions section.
2. Create a New Extension.
3. Choose the appropriate access level: Project or Organization.
   1. Project - Permits access at the project level.
   2. Organization - Allows access across the entire organisation.
4. Provide the Extension name and click "Create".

5. Copy and paste the following code into the editor:



6. Click the “Add” icon to create inputs (className) and  Click the “Save” button.

How to use the Extension:

1. Open the Journey where the step needs to be created.
2. Add a new step to call the extension using its name and Save the test step.

Example:

linksCounter() returning $Count

3. In the right-side panel under "Step Editor", scroll to the “Inputs” section.

Note:  Inputs can be a Variable or Static Data.

Pass the inputs:

    a. Use `$` for variables.

    b. Use `A` for static text.

4. Pass all the inputs under the Input sections.
5. Click on the extension’s test step.
6. The "Side effects" tab in the ri ght-side panel for results.