How to foreach every button class and click if specific class name found
<button class="b-deliverytime--slot b-deliverytime--slot-unavailable" aria-label="Not Available Today" title="Not free today">Busy</button>
<button class="b-deliverytime--slot b-deliverytime--slot-available" aria-label="Available Today" title="Today Free">Free</button>
I need to find every button with "--slot-available" and click it
Don't use forEach for asynchronous execution as it throws away the promises instead of awaiting them. Use a simple for loop:
const buttons = await page.$$('button[class*="--slot-available"]')
for (const button of buttons)
await button.click();
You can use a CSS selector to do the filtering:
const elements = await page.$$('button[class*="--slot-available"]');
elements.forEach(async element => {
await element.click();
});
The [attribute*=value] selector matches every element whose attribute value contain a specified value.
Related
Hi everyone I'm trying to click with puppeteer three elements that do not have an id, a name and a class; these are the checkboxes and the button that I have to click (www.omegle.com):
i tried to do it through the click with the coordinates but I can't center the elements to click:
await page.mouse.click(50, 200);
await page.waitForNavigation();
})()
So is there a way to click on an element without knowing its id, class or name?
// open modal by clicking "Text" button
const btnText = await page.waitForSelector('#chattypetextcell img')
await btnText.click()
// click both checkbox labels when modal opens
const selectorCheckboxLabels ='div div p label'
await page.waitForSelector(selectorCheckboxLabels)
const labels = await page.$$(selectorCheckboxLabels)
await labels[0].click()
await labels[1].click()
I'm trying to click on a div that has a role="button" attribute,
Even though I'm not using it trying to get it by its DOM path is not working either.
What I've tried:
try {
let Button = await this.page.$("div.class1.class2 > div");
await Button.click();
console.log("Clicked");
} catch (e) {
console.log(e);
console.log("No button");
}
The error I get is:
TypeError: Cannot read property '$' of undefined
I tried to get to the div by the div that contains it which does have 2 classes I can relate on but it doesn't seem to work.
Is there a way to get an array of all the divs with role="button" and click only on the one that has a span inside it with a specific text?
Remove this keyword to fix the TypeError error.
let Button = await page.$("div.class1.class2 > div");
To get an array of all the divs with role=button and Specific text text:
const buttons = await page.$x('//div[#role="button"][text()="Specific Text"]'); // returns: <Promise<Array<ElementHandle>>>
But I would recommend adding waitForXPath method to wait for the element.
Full example:
try {
const button = await page.waitForXPath('//div[#role="button"][text()="Specific Text"]');
await button.click();
console.log("Clicked");
} catch (e) {
console.log("No button", e);
}
The markup i have to work with looks like this:
<label>
<input type="radio" name="myfield" value="Yes" size>
</label>
I want to call page.click(selector) with the radio as the selector, but I can't. I don't think it is visible because of the size attribute.
My javascript looks like this:
const page = await browser.newPage();
const selector = 'input[name="myfield"]';
await page.click(selector);
So I would like to target and click the parent label element.
How do I change the value of my selector constant to target the label?
Sorry, I didn't explain very well. By can't, i mean that the element is not visible and therefore i don't believe it can technically be clicked. Therefore I think i need to target the label which is visible, but i don't know how I target it
not visible or not visible at the moment?
Have you tried to use waitForSelector(selector) ?
const page = await browser.newPage();
const selector = 'input[name="myfield"]';
await page.waitForSelector(selector); // waiting here before click
await page.click(selector);
Or something like:
const page = await browser.newPage();
const selector = 'label';
await page.waitForSelector(selector);
await page.evaluate((_) => {
document.querySelector('label > input[name="myfield"]').parentElement.click()
});
Is there any way to use nightmare (the nodeJS module) to press an arrow key? Either by sending the key to the specific element or by clicking on the element and sending the keypress to the page as a whole?
My problem is that there is a dropdown menu which, when clicked on, displays some options below it. These options do not appear to be clickable, I have tried click and even the realClick nightmare extension. Neither seem able of selecting any element of the dropdown. While playing around with the page, I found that by using the arrow keys and the enter key, I could select the options without clicking. So is there any way to send the keypress events to electron? Either through nightmare or by accessing electron directly?
It is called auto complete menu and there is no standard way of doing it.
I tried working with Google and came up with a method. I think, it will be tough to make generic solution, as it depends on how auto complete is implemented. Hope this helps!
var Nightmare = require('nightmare');
var nightmare = Nightmare({
show: true,
webPreferences: {}
})
nightmare
.goto('http://www.google.co.in')
.evaluate(function(searchTerm) {
var elem = document.querySelector('#lst-ib');
elem.value = searchTerm;
//Do mousedown to initiate auto complete window
var event = document.createEvent('MouseEvent');
event.initEvent('mousedown', true, true);
elem.dispatchEvent(event);
}, 'Leo')
.then(function() {
//Wait for results to appear
nightmare.wait(1000)
.evaluate(function() {
//Click the first option of List
var first = document.querySelector('#sbtc > div.gstl_0.sbdd_a > div:nth-child(2) > div.sbdd_b > div > ul > li:nth-child(1)');
first.firstElementChild.click();
}).then(function() {
console.log('All Done');
});
});
I want to assign value to the element and auto submit after page completely load.I encounter some question.
1.How to get the element in the tab?
2.How to fire submit event when assigned value?
I want to fire as the follow code:
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
var url = tab.url;
var config = null;
if (tab.status !== "complete") {
return;
}
else {
// assign value and fire submit event
}
});
Help!!
I wouldn't do it this way. Why not use jQuery in a content script and trigger your action on ($document).ready()? That way you'll have the document and can use jQuery selectors to get the elements that interest you. To submit, just get button using a selector and call click().