How to verify that element is not visible in webdriverio in mocha javascript

ONLINECAST

3 min read

·

02-09-2024

24

0

Share

Asserting Element Invisibility in WebdriverIO with Mocha: A Comprehensive Guide

Testing for element visibility (or lack thereof) is crucial for robust UI automation. This article delves into how to verify that an element is not visible in WebdriverIO using Mocha, offering clear explanations and practical examples.

The Problem: When Elements Disappear

Imagine a scenario where you're testing an e-commerce website. You've successfully added an item to your cart. Now, you want to ensure the "Add to Cart" button disappears to prevent accidental double-clicks. This is where verifying invisibility comes into play.

WebdriverIO & Mocha: A Powerhouse for Automation

WebdriverIO, with its intuitive API and comprehensive feature set, is a go-to choice for browser automation. Mocha, a flexible JavaScript testing framework, offers a structured way to organize and run your tests.

The Solution: isDisplayed() and its Negation

WebdriverIO's isDisplayed() function offers a straightforward way to check an element's visibility. However, to verify invisibility, we need to negate this result.

Here's a breakdown:

1. The Basic Structure:

const assert = require('assert'); 
const { browser } = require('webdriverio'); 

describe('Testing Element Visibility', () => {
  it('should verify the element is NOT visible', async () => {
    await browser.url('https://your-website.com');

    // Assuming 'elementSelector' is the CSS selector of your element
    const isElementVisible = await browser.$('elementSelector').isDisplayed();
    assert.strictEqual(isElementVisible, false, 'Element should not be visible');
  });
});

Explanation:

• describe and it: These are Mocha's building blocks for defining test suites and individual tests.
• browser.url: Navigates to the website you're testing.
• browser.$: This is WebdriverIO's element selector. It locates the element using your provided CSS selector (elementSelector).
• isDisplayed(): Returns a boolean value (true if visible, false if not).
• assert.strictEqual: A Mocha assertion that checks for strict equality. It throws an error if isElementVisible is not strictly equal to false.

2. Incorporating not for Explicit Negation:

You can achieve the same result using the not assertion from Mocha:

const assert = require('assert'); 
const { browser } = require('webdriverio'); 

describe('Testing Element Visibility', () => {
  it('should verify the element is NOT visible', async () => {
    await browser.url('https://your-website.com');

    // Assuming 'elementSelector' is the CSS selector of your element
    const element = await browser.$('elementSelector');
    assert.not(await element.isDisplayed(), 'Element should not be visible');
  });
});

Explanation:

This approach uses assert.not with the isDisplayed() function, explicitly checking that the element is not visible.

Important Note:

Both methods achieve the same result. Choose the approach that best suits your coding style and team preferences.

Beyond Basic Verification: Refining Your Tests

• Timeouts: In some cases, elements might disappear with a slight delay. Incorporate a waitForDisplayed() method with a timeout to ensure the element is truly gone before asserting invisibility.

await browser.$('elementSelector').waitForDisplayed({ timeout: 3000, reverse: true });
assert.not(await browser.$('elementSelector').isDisplayed(), 'Element should not be visible');

• Dynamic Elements: If the element you're testing is dynamically loaded, use a more robust approach like waitForVisible or waitForExist to handle its appearance and disappearance more effectively.

Key Points to Remember

• Element Visibility is Not the Only Factor: Even if an element is technically visible (e.g., located on the page but outside the viewport), it might not be truly visible to the user. Consider using waitForDisplayed with timeout and interval to handle these scenarios.
• Element's State: The visibility of an element can change depending on its state (e.g., disabled, hidden). Ensure you're testing the relevant state for your scenario.

Conclusion: Ensuring a Reliable UI

This article has showcased how to assert element invisibility using WebdriverIO and Mocha. Remember, well-structured testing ensures that your UI behaves as expected, providing a seamless user experience. By leveraging the power of WebdriverIO and Mocha, you can create robust automated tests that uncover issues before they impact your users.