In Puppeteer, we can select an option of a dropdown by providing the value as a parameter:
page.select('select#idOfSelect', 'optionValue');
Is there a function to select an option based on its text and not from its value?
There is no such method in Puppeteer API. But you can select option based on a text with XPath, then extract the value of this element and pass this value to page.select(). Here is a full example:
const puppeteer = require('puppeteer');
const html = `
<html>
<body>
<select id=selectId>
<option value=volvo>Volvo</option>
<option value=saab>Saab</option>
<option value=mercedes>Mercedes</option>
<option value=audi>Audi</option>
</select>
</body>
</html>`;
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(`data:text/html,${html}`);
const option = (await page.$x(
'//*[@id = selectId]/option[text() = Audi]'
))[0];
const value = await (await option.getProperty('value')).jsonValue();
await page.select('#selectId', value);
await page.screenshot({ path: 'screenshot.png' });
await browser.close();
})();
