Puppeteer - How can I adjust a slider or its value?

Other Questions Puppeteer
1

Issue:

I’m working on a hotel booking website and I need to modify the aria-valuemax property of the slider handle class in order to set it to a maximum value of 200, but I’m unable to select that element properly.

My Code Example:

const puppeteer = require('puppeteer');  
let browser;  
async function hotelSliderAdjust() {  
    browser = await puppeteer.launch({ headless: false });  
    const [page] = await browser.pages();  
    await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36');  
    await page.setViewport({ width: 1065, height: 10700 });  
    await page.goto('https://www.examplehotel.com', { waitUntil: 'domcontentloaded' });  
    await page.type('[name="location"]', 'Seattle, WA');  
    await page.click('.search-btn.search');  
    // Attempt to change the slider max value  
    const sliderHandle = await page.$('.slider-handle');  
    if (sliderHandle) {  
        await page.evaluate((handle) => {  
            handle.ariaValueMax = '200';  
        }, sliderHandle);  
    }  
}  
(async () => {  
    console.log('Initiating hotel slider adjustment...');  
    await hotelSliderAdjust()  
        .catch(error => console.error(error))  
        .finally(() => browser?.close());  
})();

Additional Attempts:

I also tried to log the current maximum value of the slider using similar selectors to validate if the changes were successfully applied.

2

To adjust the slider using Puppeteer, altering the aria-valuemax directly might not update the slider behavior effectively. Instead, simulate user interaction for better control and results.

Here's how you can interact with the slider and adjust its value:

const puppeteer = require('puppeteer');

async function hotelSliderAdjust() {
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();
    await page.setViewport({ width: 1065, height: 10700 });
    await page.goto('https://www.examplehotel.com', { waitUntil: 'domcontentloaded' });

    // Perform necessary page interactions if needed
    // Example - searching for location:
    // await page.type('[name="location"]', 'Seattle, WA');
    // await page.click('.search-btn.search');

    // Assuming the slider element has a class 'slider-handle'
    const slider = await page.$('.slider-handle');
    const boundingBox = await slider.boundingBox();

    for (let i = 0; i < 100; i++) { // Adjust loop as necessary
        await page.mouse.move(
            boundingBox.x + boundingBox.width / 2,
            boundingBox.y + boundingBox.height / 2,
            { steps: 10 }
        );

        await page.mouse.down();
        await page.mouse.move(boundingBox.x + boundingBox.width + 100, boundingBox.y + boundingBox.height / 2, { steps: 10 });
        await page.mouse.up();

        // Optional: Validate the change if needed
        const maxValue = await slider.evaluate(el => el.getAttribute('aria-valuemax'));
        console.log('Current Max Value:', maxValue);
    }

    await browser.close();
}

hotelSliderAdjust().catch(error => console.error('Error:', error));

This method mimics user interaction with the slider, effectively changing its position by moving and releasing the mouse. Adjust parameters such as iteration count or mouse movement distance to target the desired slider value accurately.