We Keep Coding

How to click on button using Puppeteer?

Link: http://quotes.toscrape.com/
Click on the above link and scroll to the bottom. I don't know how to click on the Next button.
My code:
await page.click(".pager > .next > a")
The above code is not working.
I want to know, how to click on this button.

I use below code and can click Next button. The keypoint here is to use waitForSelector to make sure the element you want is available.
import puppeteer from 'puppeteer';
(async () => {
const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();
await page.goto('http://quotes.toscrape.com/');
// Set screen size
await page.setViewport({width: 1080, height: 1024});
// Wait and click on first result
const searchResultSelector = '.next a';
await page.waitForSelector(searchResultSelector);
await page.click(searchResultSelector);
// await browser.close();
})();
refs from doc: https://pptr.dev/#example

Playwright page.click scrolls too much

Given I want to record the action being done the page, when clicking on an element
Playwright scrolls the page until the element is on top of the page, even though before the action the element is visible in the viewport.
P.S. the option "scroll: false" does nothing
code snippet:
await Promise.all([
global.page.waitForNavigation(),
global.page.click(global.identifier, { scroll: false })
]);
L.E.:
I want to add some more details about my issue using an example:
So, let's assume I want to do a click action on the "Answer your question" button, and page looks like this:
after the click is performed the page automatically scrolls, putting the button on top of the page, like this:
My expectation is, if the element is in viewpoint, just to perform the action, without scrolling or moving the viewpoint.

I also faced this issue so I resolve this by doing scroll into the view function reference
await page.$eval(ele, (element) => {
element.scrollIntoView();
});
So here's the full code
const playwright = require('playwright');
const moment = require('moment');
(async () => {
const browser = await playwright.chromium.launch({
headless: false,
args: ['--disable-notifications']
});
const context = await browser.newContext();
const page = await context.newPage();
await page.goto('https://stackoverflow.com/questions/68127885/playwright-page-click-scrolls-too-much');
await page.waitForSelector('.js-accept-cookies')
.then(() => page.click('.js-accept-cookies') );
let ele = '#submit-button';
await page.$eval(ele, (element) => {
element.scrollIntoView();
});
await page.click(ele);
let date = moment();
await page.screenshot({ path: `example-scroll-${date}.png` });
await browser.close();
})();
Attaching screenshot for reference:

Button Event not Triggering After Ajax Call

I'm working on a Kirby site and I followed the 'Load More' tutorial for a website blog I am working on. Everything is working; however, I am also using an AJAX call for my parent pages. (I'm using swup library).
Normally, I would bind an event after an AJAX request to the document using .on() in jQuery; however, I can't seem to figure out how to do the same within the template/new.js file in pure Javascript.
Here's my code as per the tutorial:
const element = document.querySelector('.articles');
const button = document.querySelector('.load-more');
let page = parseInt(element.getAttribute('data-page'));
console.log(element.getAttribute('data-page'))
const fetchArticles = async () => {
let url = 'news.json/page:2';
try {
const response = await fetch(url);
const {
html,
more
} = await response.json();
button.hidden = !more;
element.innerHTML += html;
page++;
} catch (error) {
console.log('Fetch error: ', error);
}
}
button.addEventListener('click', fetchArticles);
Any help is greatly appreciated.

Fill a form through javascript (puppeteer)

I'm trying to fill this login form and submit it like that:
document.querySelector('#username').value="my#email";
document.querySelector('#username').dispatchEvent(new Event('change'));
document.querySelector('#password').value="mypassword";
document.querySelector('#password').dispatchEvent(new Event('change'));
document.querySelector('button[class~="btn-red"]').click();
But the website displays the message that the email and password are empty. I guess its waiting for a key press or something.
How can I simulate that?

You can emit the input event instead of the change event:
document.querySelector('#username').value="my#email";
document.querySelector('#username').dispatchEvent(new Event('input'));
document.querySelector('#password').value="mypassword";
document.querySelector('#password').dispatchEvent(new Event('input'));
document.querySelector('button[class~="btn-red"]').click();

const puppeteer = require('puppeteer');
(async() => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://www.boxtal.com/fr/fr/app/utilisateur/connexion', {
waitUntil: 'networkidle2'
});
await page.waitFor('#username');
await page.type('#username','my#email');;
// await browser.close();
})();
If you are using puppeteer you can use the code above to type in an input field

TestCafe persist data when clicking

In TestCafe, on click of an anchor tag, I have a redirect to a new page and an event that basically logs the click event to an object.
I'm wanting to test the value of the click event in the object in TestCafe, but because the redirect happens, I lose the object.
Manually I'm able to do this, as I can hold shift while clicking the link and open a new window for the redirected page, but keep the original page in the original window and then see the object in the console.
Trying to figure out if there's a way "simulate" a click, but not do the redirect. Or alternatively, be able to assert somehow immediately after the click, but before the redirect?
mini example:
await t
.click('a') // here it already redirects so I'll lose the object
.expect(object).contains('value')

The following test shows how you can disable and enable navigation for a link:
import { Selector, ClientFunction } from 'testcafe';
fixture `Navigation`
.page `example.com`;
const enableNavigationControl = ClientFunction(selector => {
const element = selector();
element.addEventListener('click', event => window.disableNavigation && event.preventDefault());
});
const disableNavigation = ClientFunction(() => window.disableNavigation = true);
const enableNavigation = ClientFunction(() => window.disableNavigation = false);
test('navigation', async t => {
const link = Selector('a');
await enableNavigationControl(link);
await disableNavigation();
await t.click(link);
// Perform assertions...
await enableNavigation();
await t.click(link);
});