Locking View to the Bottom Section of a Page During Assertions

Article Overview:

This article will cover how you can achieve the following:

• Lock the view to the bottom section of a page after scrolling during journey execution.
• Utilize a container-based approach and custom extensions to handle sticky header elements and improve assertions.

Problem Statement:

During a journey, customers may encounter issues where the viewport scrolls back to the top of the page as Virtuoso dynamically attempts to locate elements. This behavior disrupts steps and assertions focused on the bottom section of the page. Customers need a method to keep the viewport locked on specific sections, especially for pages with sticky headers.

Solution:

The isElementAtTopOfViewport extension addresses this issue by ensuring that the viewport remains locked to a specific section of the page. It detects sticky or fixed header elements and maintains focus on the desired section throughout the journey.

Extension: isElementAtTopOfViewport



function isElementAtTopOfViewport(elementSelector) {
  const element = document.querySelector(elementSelector);
  if (!element) {
    return false;  // If the element doesn't exist, return false
  }
  const style = window.getComputedStyle(element);
  const rect = element.getBoundingClientRect();
  const isFixedOrSticky = (style.position === 'fixed' || style.position === 'sticky') && style.top === '0px';
  const isAtTopOfViewport = rect.top === 0;
  console.log(isFixedOrSticky && isAtTopOfViewport && rect.height > 0 && rect.width > 0);
  return isFixedOrSticky && isAtTopOfViewport && rect.height > 0 && rect.width > 0;
}
// Usage:
return isElementAtTopOfViewport(elementSelector);

How It Works:

Element Selection:

• Use the elementSelector to specify the target element (e.g., sticky header or container).
• Ensure the selector uniquely identifies the desired element on the page.

Conditions Checked:

The script verifies the following:

1. Position: Whether the element is fixed or sticky.
2. Viewport Alignment: If the element is positioned at the top of the viewport.
3. Visibility: Ensures the element has visible dimensions (height and width).

Integration:

Incorporate the extension into your journey steps to:

• Identify sticky header elements.
• Lock the viewport to the desired section, preventing unintended scrolling.

Example Usage:

A customer faced an issue where assertions on bottom-page elements triggered scrolling back to the top due to dynamic element detection. By integrating isElementAtTopOfViewport, they locked the view to a sticky header and maintained focus on the bottom section, ensuring smooth journey execution.

Notes:

• Dynamic Pages: Ensure the elementSelector targets the correct section consistently, even on pages with dynamic content.
• Sticky Headers: This method is particularly useful for handling sticky headers, ensuring they don’t interfere with assertions or navigation.
• Visibility Check: The script validates the element's dimensions to confirm its presence in the viewport.