Develop Reference

Puppeteer- How to .click() a single button out of a grid of buttons with same classname?

I'm developing a Nike SNKRS BOT to buy shoes with Puppeteer and Node.js.
I'm having issues to distinguish and .click() Size button screenshot of html devtools and front end buttons
That's my code: i'm not experienced so i have tried everything
const xpathButton = '//*
[#id="root"]/div/div/div[1]/div/div[1]/div[2]/div/section[1]/div[2]/aside/div/div[2]/div/
div[2]/ul/li[1]/button'
const puppeteer = require('puppeteer')
const productUrl = 'https://www.nike.com/it/launch/t/air-max-97-coconut-
milk-black'
const idAcceptCookies = "button[class='ncss-btn-primary-dark btn-lg']"
async function givePage(){
const browser = await puppeteer.launch({headless: false})
const page = await browser.newPage();
return page;
}
async function addToCart(page){
await page.goto(urlProdotto);
await page.waitForSelector(idAcceptCookies);
await page.click(idAcceptCookies,elem => elem.click());
//this is where the issues begin
//attempt 1
await page.evaluate(() => document.getElementsByClassName('size-grid-
dropdown size-grid-button"')[1].click());
//attempt 2
const sizeButton = "button[class='size-grid-dropdown size-grid-button']
button[name='42']";
await page.waitForSelector(sizeButton);
await page.click(sizeButton,elem => elem.click());
}
//attempt 3
await page.click(xpathButton)
//attempt 4
document.evaluate("//button[contains ( ., '36')]", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue
async function checkout(){
var page = await givePage();
await addToCart(page)
}
checkout()

Attempt number 2 looks like the best approach, except your selector is wrong. The button does not have a name attribute, according to your screenshot, so you will need another approach, closer to attempt 3.
You can use puppeteer to select an element by with xpath, and xpath allows you to select by an element's text content.
Try this:
await page.waitForXPath('//button[contains(text(), "EU 36")]')
const [button] = await page.$x('//button[contains(text(), "EU 36")]')
await button.click()
Because the xpath selector is returning an array of element handles, I destructure the first element in the array (which should be the only match), and assign it a value of button. That element handle can now be clicked.

Unable to get isDisabled() to work in Playwright

I need to check that a button is disabled (checking for a last page of a table). There are two with the same id (top and bottom of the table).
const nextPageButtons = await this.page.$$('button#_btnNext'); // nextPageButtons.length is 2, chekced via console.log
const nextPageButtonState = await nextPageButtons[0].isDisabled();
But when I do the above I get: elementHandle.isDisabled: Unable to adopt element handle from a different document.
Why doesn't this work?

So, this works:
const nextPageButtons = await this.page.$$('button#_btnNext');
const nextPageButton1 = await nextPageButtons[0];
const nextPageButton1State = await nextPageButtonsState.isDisabled();

Filling the form fields with log result in Puppeteer

So right now I have a grabResult.js page that I use to grab a result:
module.exports = async function grabResult(page) {
const name = await page.$eval(
'divtograbname',
(el) => el.innerText
);
const price = await page.$eval(
'divtograbprice',
(el) => el.innerText
);
return { name, price };
};
Using the below code on my main app.js page I can output the log result successfully:
while (true) {
const result = await grabResult(page);
console.log(result);
The above is outputting both: name and price
The next step is I'm trying to put name and price into the fields on my website.
I know how to fill the form field with my desired value:
await page.$eval('input[name=wc_name]', 'mydesiredvalue');
Basically, I'm trying to fill my form fields with my grabbed name and price values.
I have tried:
await page.$eval('input[name=wc_name]', 'name');
await page.$eval('input[name=wc_price]', 'price');
The above just fill the fields with text: 'name' and 'price'. It can't identify the return values from my grabResult page.
I have also tried
await page.$eval('input[name=wc_name]', $name);
await page.$eval('input[name=wc_price]', $price);
I have even tried this to see if it fill both into one:
await page.$eval('input[name=wc_name]', console.log(result));
Can't make it work.
I know I'm missing something here. I'm not a coder. Just trying to combine few blocks into one.
Help would be appreciated.

You are getting back something called an object, it looks like this:
{
name: 'name_value',
price: 1
}
name and price are properties. In order to get the property price, you can type my_object_name.price, so in your example result.price.
Then in Puppeteer, you usually fill values with page.type() method:
await page.type('input[name=wc_name]', result.name);
await page.type('input[name=wc_price]', result.price);
This should work fine.

Testcafe - Populate input field based on dropdown selection

I'm not an expert in Javascript by any means and just getting my head round testcafe which I'm really enjoying.
However as a simple test I'm trying to populate a input field based on what was selected from a dropdown. Really simple, it's a Title field, so Mr, Mrs, etc.. Based on if 'Mr' was selected then populate with male name. If 'Mrs' then populate will female name.
However I'm unable to read the value chosen once it has been selected to pass into my If...else statement and it always goes to the default last option. Can somebody help me?
My code:
import { Selector } from 'testcafe';
const TitleSelect = Selector('#title');
const TitleOption = TitleSelect.find('option');
const FirstName = Selector('#firstname');
fixture `Getting Started`
.page //any page with a Title dropdown and Firstname input field;
test('My first test', async t => {
await t
.click(TitleSelect)
.click(TitleOption.withText('Mrs'))
if (TitleOption === 'Mr') {
await t
.wait(1000)
.typeText(FirstName, "Wayne")
} else if (TitleOption === 'Mrs') {
await t
.wait(1000)
.typeText(FirstName, "Waynetta")
} else {
await t
.typeText(FirstName, "something else");
}
await t
.takeScreenshot({
path: 'If_else_statment.jpg',
fullPage: true
})
.wait(2000)
;
});

You can use the following code to get the input's state:
const value = await TitleSelect.value;
For more information, please refer to
https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors/using-selectors.html#obtain-element-state

Assert empty textbox in testcafe

I am validating if the text box is empty or not. I am not sure what am I doing wrong here.
Page Object method
async getTextVal(){
await this.t.selectText(this.editor) //selecting the text box
return this.editor.innerText; //fetching the value in the textbox
}
TestCase
await t.expect(element.getTextVal()).eql(''); //assert statement
the getTextVal works fine if there is a value present. But checking empty value it fails

try
Page Object method
async getTextVal(){
await this.t.selectText(this.editor) //selecting the text box
return await this.editor.innerText; //fetching the value in the textbox
}
TestCase
await t.expect(await element.getTextVal()).eql(''); //assert statement

Also, without a method just a selector this can be done like so:
await t.expect(selector.innerText).eql('');
You can also setup your selector in a page object file:
import { Selector, t } from "testcafe";
class PageObjectFile {
constructor() {
// input field, this could be many different styles of selectors / frameworks
this.inputField = Selector('.class-input-element');
this.inputFieldTwo = Selector('#id-input-element');
}
}
export default PageObjectFile;
And your test file like this:
import PageObjectFile from "/PageObjectFile";
let pageObjectFile = new PageObjectFile();
fixture `Tests input field is empty`
.page(`https://examplepage.com`)
test(`User see's an empty input field`, async t => {
await t.expect(pageObjectFile.inputField.innerText).eql('');
});