Search code examples
pythonxpathplaywrightnsindexpathplaywright-python

I have created a script to check a checkbox. After clicking on the checkbox, a new tab opens, but the checkbox remains unchecked

enter image description here enter image description here I want to automate the signup process but I'm unable to check the box using Playwright. Each time I click on the checkbox, I am redirected to a new link. In the DOM, when the checkbox is checked, the class of the parent element changes from invalid to valid.

import re
from playwright.sync_api import sync_playwright

def test_example() -> None:
    with sync_playwright() as p:
        browser = p.chromium.launch(headless=False, slow_mo=2000)
        context = browser.new_context()
        page = context.new_page()

        page.goto("https://www.softr.io/templates/inventory-management")
        page.locator('//button[@data-cky-tag="accept-button"]').click()
        page.locator('//span[contains(normalize-space(text()), "Sign up for free")]').click()
        page.locator('//input[@placeholder="Full Name"]').fill("tairtable")
        page.locator('//input[@placeholder="Email"]').fill('[email protected]')
        page.locator('//input[@placeholder="Password"]').fill('Xyz@12345678')

        # Click on the checkbox that opens a new window
        with context.expect_page() as new_page_info:
            page.locator('//div[@class="sw-checkbox ng-tns-c689136354-0"]//label').click()
        new_page = new_page_info.value

        # Perform any actions on the new page if needed
        new_page.close()


        # Return to the original page
        page.locator('//button[contains(normalize-space(text()), "Sign up for free")]').click()

test_example()

expected is checkbox should be checked

Solution

  • Your issue is that checkbox is hidden under pseudo-element ::before.

    Playwright by default executes click in the center of element, your element center is link Terms of Conditions, which is opened in new window. To avoid clicking on link you can use click on element by offset.

    page.locator(selector).click(position={'x': offset_x, 'y': offset_y})

    Example (I didn't change selectors, some of them don't look unique enough, but it is not related to question):

    from playwright.sync_api import sync_playwright

def test_example() -> None:
    with sync_playwright() as p:
        browser = p.chromium.launch(headless=False, slow_mo=2000)
        context = browser.new_context()
        page = context.new_page()

        page.goto("https://www.softr.io/templates/inventory-management")
        page.locator('//button[@data-cky-tag="accept-button"]').click()
        page.locator('//span[contains(normalize-space(text()), "Sign up for free")]').click()
        page.locator('//input[@placeholder="Full Name"]').fill("tairtable")
        page.locator('//input[@placeholder="Email"]').fill('[email protected]')
        page.locator('//input[@placeholder="Password"]').fill('Xyz@12345678')

        page.locator('//div[@class="sw-checkbox ng-tns-c689136354-0"]//label').click(position={'x': 10, 'y': 10})

        page.locator('//button[contains(normalize-space(text()), "Sign up for free")]').click()

test_example()