Пуппетир щелкает кнопку входа в Reddit

Вопрос или проблема

const puppeteer = require ('puppeteer');

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function loginToReddit(usernameText, passwordText){
    const browser = await puppeteer.launch({
        headless: false,
        defaultViewport: false,
        userDataDir: "./tmp"
    });
    const page = await browser.newPage();
    await page.goto('https://www.reddit.com/');
    await page.click('#login-button');

    sleep(2000).then(() => {
        enterCredentials(usernameText, passwordText, page);
    });
}

async function enterCredentials(usernameText, passwordText, page){
    await page.click('#login-username');
    await page.keyboard.type(usernameText,{
        delay: 50,
    });
    await page.click('#login-password');
    await page.keyboard.type(passwordText,{
        delay: 50,
    });
    sleep(2000).then(() => {
        selectLoginButton(page);
    });
}

async function selectLoginButton(page) {
    page.waitForNavigation();
    //const xp = 'faceplate-tracker button';
    const xp = 'faceplate-tracker > button';
    const el = await page.waitForSelector(xp);
    await el.click();
}

loginToReddit('username', 'password');

Ответ или решение

Решение проблемы нажатия на кнопку входа на Reddit с помощью Puppeteer

При работе с Puppeteer для автоматизации процесса входа на Reddit может возникнуть трудность с выбором кнопки входа, особенно если у этой кнопки отсутствуют идентификаторы или имена. В данной статье мы рассмотрим, как правильно выбрать и нажать на кнопку входа, даже когда она обрамлена другими элементами и не имеет уникальных атрибутов.

1. Анализ структуры страницы

Первым шагом должно стать исследование структуры страницы Reddit для понимания, как устроены элементы кнопок. Откройте Chrome DevTools (правый клик на странице -> "Просмотреть код" или просто нажмите F12) и воспользуйтесь инструментом выбора, чтобы проанализировать HTML-код кнопки. Обратите внимание на ее классы и родительские элементы.

2. Изменения в коде

Рассмотрим ваш существующий код и внесем необходимые изменения для успешного нажатия на кнопку входа. Основной проблемой является то, что вы пытаетесь использовать XPath, который может быть недостаточно точным, и, скорее всего, приводит к ошибкам при выборе элемента. Вместо этого мы будем использовать селекторы классов и других атрибутов:

const puppeteer = require('puppeteer');

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function loginToReddit(usernameText, passwordText){
    const browser = await puppeteer.launch({
        headless: false,
        defaultViewport: false,
        userDataDir: "./tmp"
    });
    const page = await browser.newPage();
    await page.goto('https://www.reddit.com/');
    await page.click('#login-button');

    await sleep(2000);
    await enterCredentials(usernameText, passwordText, page);
}

async function enterCredentials(usernameText, passwordText, page){
    await page.waitForSelector('#login-username');
    await page.click('#login-username');
    await page.keyboard.type(usernameText, {
        delay: 50,
    });
    await page.waitForSelector('#login-password');
    await page.click('#login-password');
    await page.keyboard.type(passwordText, {
        delay: 50,
    });

    await sleep(2000);
    await selectLoginButton(page);
}

async function selectLoginButton(page) {
    // Используем более надежный селектор для выборки кнопки
    const loginButtonSelector = 'button[type="submit"]'; // или используйте `button:contains("Войти")` при необходимости
    await page.waitForSelector(loginButtonSelector, { visible: true });
    const loginButton = await page.$(loginButtonSelector);

    if (loginButton) {
        await loginButton.click();
    } else {
        console.error("Кнопка входа не найдена!");
    }
}

loginToReddit('username', 'password');

3. Объяснение изменений

• Использование более точного селектора: Мы заменили XPath на CSS-селектор, который ищет кнопку по типу. Это более надежно и удобно.
• Ожидание видимости элемента: Применение параметра { visible: true } в методе waitForSelector гарантирует, что Puppeteer дождется, пока кнопка станет кликабельной, прежде чем пытаться на нее нажать.
• Логирование ошибок: Если кнопка не найдена, вы сможете получить предупреждение в консоли, чтобы понять, в чем проблема.

4. Заключение

Работа с Puppeteer требует внимательного подхода к выбору элементов, особенно в случаях, когда элементы не имеют уникальных идентификаторов или имен. Использование CSS-селекторов и тщательное взаимодействие с DOM помогут вам преодолеть подобные сложности. Следуя изложенным рекомендациям, вы сможете успешно автоматизировать процесс входа на Reddit без проблем.