Back to the Documentation

waitForElement.js Demo

Basic waitForElement Test

Test waiting for a single element that exists immediately

waitForElement('#immediate-element')
    .then(el => {
        resultEl.textContent = `Found element with text: ${el.textContent}`;
        resultEl.classList.add('success');
    })
    .catch(err => {
        resultEl.textContent = err;
        resultEl.classList.add('error');
    });
This element exists immediately

Dynamic Element Test

Test waiting for an element that appears after a delay

// First click will create the element after 5 seconds
// waitForElement is set to check every 500ms for up to 20 tries 
let created = false;
button.onclick = () => {
    if (!created) {
        setTimeout(() => {
            const el = document.createElement('div');
            el.id = 'delayed-element';
            el.textContent = 'This element appeared after 5 seconds';
            testArea.appendChild(el);
            created = true;
        }, 5000);
    }
};

waitForElement('#delayed-element', 500, 20)
    .then(el => {
        resultEl.textContent = `Found delayed element: ${el.textContent}`;
        resultEl.classList.add('success');
    })
    .catch(err => {
        resultEl.textContent = err;
        resultEl.classList.add('error');
    });

Multiple Elements Test

Test waiting for multiple elements matching a selector

// Create 3 elements after 1 second
setTimeout(() => {
    for (let i = 1; i <= 3; i++) {
        const el = document.createElement('div');
        el.className = 'dynamic-element';
        el.textContent = `Dynamic Element ${i}`;
        testArea.appendChild(el);
    }
}, 1000);

waitForElement('.dynamic-element', 400, 15, true)
    .then(elements => {
        resultEl.textContent = `Found ${elements.length} elements`;
        resultEl.classList.add('success');
    })
    .catch(err => {
        resultEl.textContent = err;
        resultEl.classList.add('error');
    });

Element That Never Appears

Test the error handling when an element doesn't appear

// This element will never be created
// We set a very short timeout (3 checks at 200ms = 600ms total)
waitForElement('#non-existent-element', 200, 3)
    .then(el => {
        resultEl.textContent = `Unexpected success - found element`;
        resultEl.classList.add('success');
    })
    .catch(err => {
        resultEl.textContent = `As expected: ${err}`;
        resultEl.classList.add('error');
    });

waitForPageLoad Test

Test waiting for the DOM to be fully loaded

waitForPageLoad()
    .then(() => {
        resultEl.textContent = 'DOM is fully loaded';
        resultEl.classList.add('success');
    });