CODEWITHSUNDEEP
css-selectorspuppeteer
user310291
user310291

Reputation: 38220

Puppeteer cannot select attribute tabindex

Subsequent to puppeteer page.select with multiple class doesn't seem to work I now want to select the second dropdown by tabindex but it doesn't work

      await page.goto('https://jsitor.com/c0rM-YohL', {
         waitUntil: 'networkidle0',
      });

      const iframeSelector = '.iframe-container iframe';

      await page.waitForSelector(iframeSelector, {
          visible: true
      });

      const frameHandle = await page.$(iframeSelector);
      const frame = await frameHandle.contentFrame();

      await frame.type(".test-element.Input", "test input");
      let selected = await frame.select(".test-element.Dropdown [tabindex='2']", "test4");
      console.log('selected', selected);

Upvotes: 0

Views: 422

Answers (1)

theDavidBarton
theDavidBarton

Reputation: 8851

Make sure not to put a space between the class selectors and the attribute selectors:

  • ".test-element.Dropdown [tabindex='2']" ❌
  • ".test-element.Dropdown[tabindex='2']" ✔️

like this:

let selected = await frame.select(".test-element.Dropdown[tabindex='2']", 'test4')

it will result:

selected [ 'test4' ]

Note: you can test CSS selectors yourself in Chrome DevTools Console by typing the selector inside $(). E.g. If you click within the iframe(!) and type $(".test-element.Dropdown [tabindex='2']") it will return null while $(".test-element.Dropdown[tabindex='2']") returns select.test-element.Dropdown.

Upvotes: 1

Related Questions