How click checkbox with CSS locator ::after using playwright

Question

I have to click checkbox for term & conditions. I have used .click() and .check in my code. But when I am running the code, it's clicking on the terms & conditions and it's redirecting to another page. can you suggest any help. below is my html

When I hover mouse to ::before and ::after checkbox is highlighting.

await this.page.locator('#lb-confirm').click()

await this.page.locator('#lb-confirm').check

Edit: I have tried with jquery in console and able to click checkbox. $('#dr-cb-confirm').trigger('click') with above code, how can I convert to playwright code. I have tried with below code await page.locator(''#dr-cb-confirm').click() .. Playwright was tried to click and but not finally it was exited from execution.

Answer 1

I found the solution. Since I was unable to click checkbox, I have jQuery to click the checkbox $('#dr-cb-confirm').trigger('click') . When I want to call the jQuery command in playwright I have installed jQuery library using npm i --save-dev @types/jquery. Then I have updated my code with jQuery await this.page.evaluate(() => $('#dr-cb-confirm').trigger('click'))