Is it possible to interact with a checkbox's pseudo-element ::after using a CSS locator

For the terms & conditions checkbox, I have attempted to use both .click() and .check functions in my code. However, when running the code, it seems to click on the checkbox and redirect to another page. Any suggestions on how to fix this issue? Below is a snippet of my HTML: https://i.sstatic.net/dH0NA.png

Additionally, when hovering over the ::before and ::after elements of the checkbox, it highlights. https://i.sstatic.net/oa4i2.png

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

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

Edit: I've experimented with jQuery in the console and was able to successfully click the checkbox using: 

$('#dr-cb-confirm').trigger('click')
How can I convert this functionality into Playwright code? I've tried the following: 
 await page.locator('#dr-cb-confirm').click()
.. Although Playwright attempts to click, it eventually exits without completing the action.

javascriptautomationplaywrightplaywright-test

Answer №1

After encountering difficulty in clicking a checkbox, I utilized jQuery to do so programmatically: 

$('#dr-cb-confirm').trigger('click')
. To enable this functionality in Playwright, I first installed the jQuery library using npm i --save-dev @types/jquery. Subsequently, I integrated jQuery into my code as follows: 
await this.page.evaluate(() => $('#dr-cb-confirm').trigger('click'))

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The HTML attribute "hasbox" specifies the presence of a box within the element

I am currently working on resolving some rendering issues specifically in IE9 and have encountered a tag attribute that I am not familiar with - hasbox. Upon further investigation, it seems like IE is injecting this attribute at runtime as it does not app ...

javascripthtmlcss

Using an if statement within a map function in a React component

I am facing a challenge with using an if statement inside a map function without changing the return value. Here is my code snippet: this.example = this.state.data.map((item) => { return( <div> {if(1 + 1 == 2){ dat ...

javascriptreactjs

Tips on storing JSON string array with multiple name/value pairs in distinct arrays using JavaScript

Below is a JSON string that I have: [ { "id" : "1", "name" : "name1" }, { "id" : "2", "name" : "name2" }, { "id" : "3", "name" : "name3" }, { "id" : "4", "name" : "name4" }, { "id" : "5", "name" : "name5" } ] Is there a way to split this data into two se ...

javascriptjson

Use the slide bar to adjust the Angular filter value

I am diving into my very first AngularJS project and I must admit, I have zero experience with Angular. On my HTML page, I have implemented a slider bar with two handles to set a minimum and maximum value. Here is the snippet of code where this functionali ...

javascriptangularjsfilter

Addressing the delay of "Rasterize Paint" on mobile devices while implementing css3 opacity transitions

I'm currently working on a project that involves users navigating back and forth between modals. To achieve this, I decided to use CSS transitions to change the opacity from 0 to 1. However, I've encountered some issues with slow transitions. So ...

javascriptjqueryhtmlcss

React native and redux: Updating state with setState is not possible during an ongoing state transition

Currently in the process of developing an app utilizing React Native and redux, alongside Express js for handling Ajax requests. Encountering an issue where the data from my Ajax request fails to load, accompanied by the following warning: Warning: set ...

javascriptexpressreact-nativereact-reduxsetstate

The vanishing act: Semantic UI menu disappears when you click

My objective is to create a persistent left-side menu using Semantic-UI. I want to implement two different states for the menu - one with text for each item and another with an image for each item. However, I am facing some challenges that have me complete ...

javascriptjqueryhtmlcsssemantic-ui

Troubleshooting why the second statement is not being triggered by the Vuejs

Incorporating a lambda expression into the methods section of a Vuejs component has been a recent challenge for me. Here's an example: I initiate alertyou() and upon receiving the alert, I click okay. Subsequently, in the Vue developer tools, I notic ...

javascriptvue.jsvuejs2arrow-functions

Problem with input field borders in Firefox when displayed within table cells

Demo When clicking on any cell in the table within the JSFiddle using Firefox, you may notice that the bottom and right borders are hidden. Is there a clever solution to overcome this issue? I have experimented with a few approaches but none of them work ...

javascripthtmlcss

Tips for comparing an array against a string and increasing a variable based on the outcome

I am currently working on a Javascript code snippet that aims to find specific strings in an array. var test = ['hello', 'my', 'name']; for (var i = 0; i < data.length; i++) { if (test === "name") { //In the ...

javascriptarrays

Vue.js application failing to display images fetched from the server

When I'm running my Vue.js app locally, the images are loading fine from the "src/assets" folder. However, when I deploy the app to Firebase, the images are not displaying and I get a 404 error. What could be causing this issue? I have tried using: ...

javascriptfirebasevue.jsvuejs2

What is the best way to create a dynamic pie chart in AngularJS using JSON data?

In my controller: When calling the web services, if the service is successful, then retrieve the data and push it into the corresponding arrays. for(var i = 0; i < $scope.reportRangeList.length; i++) { count++; if( ...

javascriptarraysjsonchartshighcharts

Guide to altering the color of an href element when clicked using Jquery

I am looking to modify the color of the selected language when clicked. See my code snippet below: $(document).ready(function(){ $("a[href*='lang']").click(function(e) { e.preventDefault(); $('#header-top a').remove ...

javascriptjqueryhtmlcss

Looking for a way to convert 24-hour format to minutes in Angular? I'm in need of some TypeScript code to

I am looking for Typescript code that can convert 24-hour time format into minutes. For example, when converting 1.00 it should output as 60 minutes. When converting 1.30 it should equal to 90 minutes. If anyone has the code for this conversion, p ...

javascriptangulartypescript

Implementing global event callback in JavaScript

Is there a way to globally add an `onerror` function for the `div.circle_thumb>img` event? Instead of adding an `onerror` event to each img tag individually, such as shown below. <div class="circle_thumb" ><img src="some/url" onerror="this.sr ...

javascript

Remove the temporary folder associated with an iOS application using the Cordova plugin

Would it be possible to delete the Library directory in iOS where I am storing images within my app using the Cordova-plugin-file and Cordova-plugin-file transfer? Seeking assistance from anyone who can help with this. This is the code I have for downloa ...

javascriptiosangularjscordovaionic-framework

Reveal Password Feature in Angular After User Click

I am working on an inventory page that includes a password field. My goal is to initially hide the password and display it as points (****) instead. I would like the password to be revealed either when clicked or through a pop-up. JS var retrieveCert ...

javascriptjqueryhtmlangularjs

Guide on displaying an array with keys in an HTML file using a promise function and React

I have a Firebase database with the tags "bookName" and "author". How can I display an array from the function "getBook"? import React, {Component} from 'react'; import firebase from '../firebase/firebase.js'; export default class Bo ...

javascriptreactjsfunctionpromise

Exploring the process of retrieving JSON from an API using plain JavaScript within the Protractor framework

I'm attempting to retrieve the distance between two locations using the TomTom API. Unfortunately, I am facing an issue with Protractor: When trying to use the *fetch function - I receive an error stating "fetch is not defined" and it advises me to ...

javascriptselenium-webdriverautomationprotractor

How can I retrieve JSON data from an AJAX request on an HTML page?

How can I display my JSON data on an HTML page using this JavaScript code? $.ajax({ url : 'auth.json', type: "GET", dataType : "jsonp", success: function(result) { $.each(result, function(i, v) { // Loop through each record in ...

javascriptjqueryhtmlajaxjson