Javascript - In headless mode, the code fails due to encountering an unexpected captcha screen. How can I bypass?

AhilaB
February 20, 2024
229 views
0 votes
2 Answers

I am able to successfully execute this code when headless mode is set to false, and the login process functions as expected. However, when running in headless mode, particularly within a pipeline environment, the code fails due to encountering an unexpected captcha screen. This captcha detection mechanism identifies automated access and interrupts the process, leading to failure. How can I bypass this captcha screen?

import { expect, chromium } from "playwright/test";

module.exports = async () => {
    const browser = await chromium.launch();
    await browser.newContext();

    const page = await browser.newPage();
    await page.goto(process.env.VITE_BASE_URL ?? "https://photondev.sgsco.com/");
    const origin = await page.evaluate(() = window.location.origin);
    await page.goto(`${origin}/dashboard`);
    await page.getByRole("button", { name: "Login As A Client" }).click();
    await page.getByRole("link", { name: "Google" }).click();
    await page
        .getByLabel("Email or phone")
        .fill(process.env.VITE_PLAYWRIGHT_GMAIL_USERNAME ?? "test");
    await page.getByRole("button", { name: "Next" }).click();
    await page
        .getByLabel("Enter your password")
        .fill(process.env.VITE_PLAYWRIGHT_GMAIL_PASSWORD ?? "test@123");
    await page
        .locator("#passwordNext")
        .getByRole("button", { name: "Next" })
        .click();
    await page.waitForURL(
        `${origin}/dashboard?period=last+3+months&status=4&toggle=true`,
    );
    expect(page).toHaveURL(
        `${origin}/dashboard?period=last+3+months&status=4&toggle=true`,
    );
    await page.goto(
        `my page`,
    );
    await page.goto(`${origin}/dashboard`);
    await page.goto(
        `${origin}/dashboard?period=last+3+months&status=4&toggle=true`,
    );
    await page.context().storageState({ path: "state.json" });
    await browser.close();
};

enter image description here

I need to bypass this captcha in headless mode when running in the DevOps pipeline.

Tags: javascript playwright

Answers

- OPSM
- February 19, 2024 at 11:22 pm
- 0 votes
0
You cant bypass with out of the box Playwright, as Captcha is literally designed for bot/automated system detection. There are 3 ways I would recommend to solve your problem.
1. Use some plugin like "stealth" found in the playwright-extra library, but this is a workaround, not a solution.
2. My heavily preferred option. You arent using a true "test" environment if captcha is being shown. You should sit with the rest of your development team to look at this. If you are testing, it should be done in an environment you (as a company/team) can control, and as such can remove the necessity for this to flagging. Test env have no need for Captcha if all else is done correct.
3. Something like this can also work:
  https://playwright.dev/docs/api-testing#reusing-authentication-state
Where you generate your state perhaps by API and then pass this into your tests, if Captcha is flagging on your UI runs. Again, this is just a workaround.

Really, captcha is for automated system detection, and you are using something that is flagged as a bot to bypass it, which is counter-intuitive. You should look to remove this for Test environments, for true automated testing to work as you want it to.

If you wanted to skip my suggestion and try anyway, you should try:
- adding a user agent.
- making sure you sign in as infrequently as possible to limit your detection as a bot.
- add some extra dummy clicks on to other things to simulate a real user.
- add some waits for a few seconds to make it more human like.
But again, I cant stress this enough, you should be working around this by option 2 or 3 above.

Hope this helps! 🙂
Login or Signup to reply.

- MikeStopContinues
- February 20, 2024 at 9:12 am
- 0 votes
0
You can try running {headless: false} in your CI/CD pipeline. This helps with bot detection.

However, if the browser fails to start, you may need to deploy Playwright inside an ubuntu docker container to ensure the necessary dependencies for headed mode. Inside the docker container, you’ll launch a Playwright browser server.

To connect to a docker browser server, you’ll also have to update your test config with connectOptions:
```
export default defineConfig({
  use: {
    connectOptions: {
      wsEndpoint: `ws://your_docker_container_server`,
    },
  },
});
```
All that said, @OPSM is correct. You should have a bypass in the codebase that circumvents captcha for certain users. For example, if the sign-in/sign-up email ends with @test.example.com.
Login or Signup to reply.