'Next' Button is disabled after entering login email with automated testing Puppeteer

New Member
3 0 0

I am writing an integration test using Jest and Puppeteer that logs into shopify, creates webhook, products, etc.

 

Getting past that captcha was a real pain but now I face another problem - intermittently when the login page loads and my test enters the login email, the `Next` Button becomes disabled and the test fails. I have a feeling that reCAPTCHA is part of it but I am not sure exactly.

Can reCAPTCHA be disabled all together for my url?

`https://madison-local.myshopify.com/admin/`
`emma.colbeck@omnium.io`

The login process with Captchas has become somewhat ridiculous as shown in the code below - considering the randomization of when the captcha will show up

const loginToShopify = async () => {
    await page.goto(`${config.shopify_endpoint}`, {
        waitUntil: 'networkidle2',
    });
    if ((await page.$('#account_email')) !== null) {
        // if reCAPTCHA block appears, resolve it first
        if ((await page.$('.g-recaptcha > div > div > iframe')) !== null) {
            console.log('case 1: reCAPTHA appears as soon as page loads, before typing email');
            await common.singleClick('#account_email');
            await page.type('#account_email', shopifyData.shopify_login_username);
            await page.waitForSelector('.next-input__help-text > span', { visible: true });
            await page.solveRecaptchas();

            await common.singleClick('#body-content > div.login-card > div:nth-child(3) > div > form > button');
            await common.singleClick('#account_password');
            await page.type('#account_password', shopifyData.shopify_login_password);

            // after entering the pw, if captcha appears, solve it
            if ((await page.$('.g-recaptcha')) !== null) {
                console.log('case 1-a: reCAPTHA appears after entering the password and clicking Next');
                await page.solveRecaptchas();
                await common.singleClick('#login_form > button');
            } else {
                console.log('case 1-b: reCAPTHA DOES NOT appear after entering the password and clicking Next');
                await page.waitForSelector('.g-recaptcha', { visible: true });
                await common.singleClick('#login_form > button');
            }

            // if no reCAPTCH block appears at first, enter email and click `Next`
        } else {
            console.log('case 2: reCAPTHA appears only after entering the email');
            await common.singleClick('#account_email');
            await page.type('#account_email', shopifyData.shopify_login_username);
            await page.waitForSelector('.next-input__help-text > span', { visible: true });
            const isDisabled = (await page.$('#body-content > div.login-card > div:nth-child(3) > div > form > button[disabled]')) !== null;
            if (isDisabled) {
                await page.reload();
                await common.singleClick('#account_email');
                await page.type('#account_email', shopifyData.shopify_login_username);
                await page.waitForSelector('.next-input__help-text > span', { visible: true });
                await common.singleClick('#body-content > div.login-card > div:nth-child(3) > div > form > button');
                await page.waitFor(2000);
            } else {
                await common.singleClick('#body-content > div.login-card > div:nth-child(3) > div > form > button');
                await page.waitFor(2000);
            }

            // after clicking `NEXT`, if reCAPTCHA block appears, resolve it
            if ((await page.$('.g-recaptcha')) !== null && (await page.waitForSelector('.g-recaptcha', { visible: true }))) {
                console.log('case 2-a: reCAPTHA appears after entering the email and clicking Next');
                await page.solveRecaptchas();
                await common.singleClick('#body-content > div.login-card > div:nth-child(3) > div > form > button');
                await common.singleClick('#account_password');
                await page.type('#account_password', shopifyData.shopify_login_password);

                // after entering the pw, if captcha appears, solve it
                if ((await page.$('.g-recaptcha')) !== null) {
                    console.log('case 2-a.1: second reCAPTHA appears after entering the password and clicking Next');
                    await page.solveRecaptchas();
                    await common.singleClick('#login_form > button');
                } else {
                    console.log('case 2-a.2: second reCAPTHA DOESNT appears after entering the password and clicking Next');
                    await page.waitForSelector('.g-recaptcha', { visible: true });
                    await common.singleClick('#login_form > button');
                }
                // after clicking `NEXT`, if reCAPTCHA block does not appear
            } else {
                console.log('case 2-B: reCAPTHA DOESNT appear after entering the email and clicking Next');
                await page.waitForSelector('#account_password', { visible: true });
                await page.click('#account_password');

                await page.type('#account_password', shopifyData.shopify_login_password);
                // after entering the pw, if captcha appears, solve it
                if ((await page.$('.g-recaptcha')) !== null) {
                    console.log('case 2-B.1: second reCAPTHA appears after entering the password and clicking Next');
                    await page.solveRecaptchas();
                    await common.singleClick('#login_form > button');
                } else {
                    console.log('case 2-B.2: second reCAPTHA DOESNT appears after entering the password and clicking Next');
                    await common.singleClick('#login_form > button');
                }
            }
        }
    }
};
0 Likes
Highlighted
New Member
3 0 0

I should also mention this screenshot that shows a `disabled` `Next` button when the email is entered
Screenshot from 2019-08-19 14-44-23.png

0 Likes
Highlighted
Tourist
8 0 0

Were you able to resolve the issue, facing the same on Safari while performing OAuth2 Code Flowauthentication

0 Likes