Puppeteer click parent node of a element with no id

user_14543816 0
Viewed 215

I'm trying to select a certain size on this website, I have tried multiple approaches that have worked for me so far in puppeteer but none of them seems to work on this instance. I can get the size tab open but cannot figure how to select a specific size.

my code:

        await page.goto(data[ii][0]), { //the website link
            waitUntil: 'load', 
            timeout: 0 
        }; 

        //part 1

        await page.click('span[class="default-text__21bVM"]'); //opens size menu
        
        let size = data[ii][1]; //gets size from an array, for example 9
        
        // const xp = `//div[contains(@class, "col-3") and text()="${size}"]`;
        // await page.waitForXPath(xp);
        // const [sizeButton] = await page.$x(xp);
        // await sizeButton.evaluate(btn => {
        //     btn.parentNode.dispatchEvent(new Event("mousedown"));
        // });


        await delay(1500);
        await page.evaluate((size) => {
            document.querySelector(`div > div[class="col-3"][text="${size}"]`).parentElement.click()
        });

        await page.click('span[class="text__1S19c"]'); // click on submit button

Neither of my approaches worked. I get Error: Evaluation failed: TypeError: Cannot read property 'parentElement' of null meaning the div wasn't found for whatever reason

this is the html of the div I'm trying to click on: enter image description here

I tried different variations of the querySelector but none of them worked so I'm posting the problem here to see if this is even possible, or if I just made a mistake along the way

puppeteer node.js
1 Answers

This seems working:

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch({ headless: false, defaultViewport: null });

try {
  const [page] = await browser.pages();

  await page.goto('https://releases.footshop.com/nike-air-force-1-07-lx-wmns-5iBRxXsBHBhvh4GFc9ge');

  await page.click('span[class="default-text__21bVM"]');

  const size = 9;
  const xp = `//div[contains(@class, "col-3") and text()="${size}"]`;
  await page.waitForXPath(xp);

  const [sizeButton] = await page.$x(xp);
  await sizeButton.click();
  await page.click('span[class="text__1S19c"]');
} catch (err) { console.error(err); }
user_26255600
Related