Is there a tool available for testing the :contains() CSS3 pseudo-class directly within a web browser?

While developing CSS selectors to use with Selenium, I have encountered an issue with the pseudo-class :contains(). Even though the W3 has a draft of CSS3 that includes :contains(), it seems like the final version did not include it.

I am utilizing Chrome's tools to verify my CSS selectors and ensure they are correct. Unfortunately, Chrome does not support :contains(), which is not unexpected.

Is there a tool available that will enable me to experiment with selectors using :contains() on our webpages?

I am currently working on a Mac with Lion. Additionally, I may be restricted to using Firefox 3.5.7 as I have been advised to postpone updating for now.

cssseleniumcss-selectors

Answer №1

The selector engine in jQuery also includes the :contains() pseudo-class. It appears that both jQuery and Selenium handle it in the same way.

If you want to test this on websites that don't use jQuery, it might be a bit tricky. But for sites that do use jQuery, you can simply open your browser's JavaScript console and run some jQuery selectors there.

For example, you could try running this line in Chrome's JavaScript console while viewing this specific Stack Overflow question (results may vary based on whether you are logged in or not):

> $("#mainbar div[id]:contains('selector')").get() /* DOM objects with .get() */

[<div class=​"question" id=​"question">​…​</div>​, <div id=​"answers">​…​</div>​, <div id=​"answer-9007154" class=​"answer">​…​</div>, <div id=​"answer-9008184" class=​"answer">​…​</div>​]

Answer №2

The :contains() selector is not something that I have come across in my experience.

When it comes to pseudo-classes, the http://caniuse.com/#search=contain website does not show any results.

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

Executing JavaScript code with Node.js while utilizing Selenium

Seeking guidance as a beginner in Javascript, I apologize if my question is too basic. I am attempting to execute a Selenium test written in Javascript. Starting with a simple task of loading Google using chromedriver, I encountered an issue while running ...

javascriptnode.jsselenium

The Bootstrap width is spilling over and not conforming to the content of the form

I'm facing an issue with content overflow on multiple forms within a webpage that uses Bootstrap 4. I can't seem to find a solution to make the width of the forms fit the content properly. Take a look at this picture showing one of the simpler fo ...

htmlcssbootstrap-4overflow

Ensure Navbar elements remain on a single line

I need my Bootstrap Navbar elements to remain on a single line regardless of the screen width. Although I have searched for a solution to this issue numerous times and tried different approaches, none have proven effective in my case. Below is the code s ...

htmlcsstwitter-bootstrap

Excessive width of the lower border

I have a dropdown menu on my website and I wanted to add a border-bottom to the menu. However, the border appears too wide. I went through every step of this solution as it seemed like the same problem, but nothing seems to be working. It would be great i ...

htmlcss

Interact with a React dropdown using SeleniumBase

I am having trouble testing a dropdown on a webpage I built with React and the Ant Design framework. I am attempting to use SeleniumBase or Selenium Webdriver for the task. The dropdown in question can be viewed here: https://ant.design/components/select/ ...

javascriptseleniumseleniumbase

Ways to merge multiple cells horizontally in a table right from the beginning

Is there a way to start the colspan from the second column (Name)? See image below for reference: https://i.stack.imgur.com/RvX92.png <table width="100%"> <thead style="background-color: lightgray;"> <tr> <td style="width ...

javascripthtmlcssangularjs

Protractor and Cucumber working together

I'm attempting to create a basic cucumber example using protractor, but I'm encountering errors in the feature file. Here is my code: protractor.conf.js file var prefix = 'src/test/javascript/'.replace(/[^/]+/g,'..'); expor ...

seleniumprotractorcucumbercucumberjs

How can I use Selenium WebDriver in Java to click and print data in the 2nd position of a table presented in HTML format?

Can anyone guide me on how to click a link and print the data using Selenium WebDriver? Specifically, I am looking to click on the Yahoo.com link and print "Yahoo". Additionally, I need to print the data "Searched data of Yahoo". The challenge is that th ...

javaeclipseseleniumselenium-webdriver

Create a dynamic image positioned alongside text specifically designed for mobile devices

One of my challenges involves implementing a responsive image in Bootstrap (3.3.7): <div class="col-sm-2 text-center"> <img class="img-responsive center-block " src="img/1.png" style="max-width: <p>I would like to include some gua ...

csstwitter-bootstraplayout

Tips for Keeping Footer Aligned with Content:

When checking out this website, you may notice that the footer appears to be affixed to the left side. The CSS code responsible for this is as follows: #footer { width: 800px; clear:both; float:right; position:relative; left:-50%;} I would appreciate it ...

htmlcss

Focus on targeting dynamic IDs such as #event_rules_attributes_0_interval, #event_rules_attributes_1_interval, etc. using CSS3 styling

Styling input tags using their IDs can be very convenient due to the higher precedence weight they hold compared to classes. For instance, I set a default width for input.text elements within a specific container: .details .metadata input.text { width: 2 ...

csscss-selectors

Uploading a file with Selenium while the style attribute is set to "display:none;"

Hi there, I'm encountering an issue where I am receiving the error "Element is not reachable by keyboard" when trying to attach a PDF file. Can anyone offer assistance? When I attempt to click on or upload a file, I find it difficult as the cursor doe ...

javaseleniumselenium-webdriverwebdriverdisplay

What is the technique for rearranging columns to be at the top in Foundation for mobile devices?

On my desktop, I have a layout like this: [Column1 large-8] [Column2 large-4] For mobile view, I'd like it to be like this: [Column2 large-4] [Column1 large-8] Below is the code snippet I am working with: <div id="search-content" class="row ma ...

htmlcsszurb-foundation

Customizing the appearance of Jquery UI Accordion Headers

Trying to integrate the JQuery UI accordion into my JQuery UI modal dialog has been causing some alignment issues. Despite following code examples found online, such as http://jsfiddle.net/eKb8J/, I suspect that the problem lies in CSS styling. My setup i ...

javascriptjqueryhtmlcssjquery-ui

CSS: Deciphering the Hidden Message in this Code Snippet!

Update In my CSS file, I encountered a conflict with the following snippets. When I include this section: <style type="text/css"> ::selection{ background-color: #E13300; color: white; } ::moz-selection{ background-color: #E13300; colo ...

css

What is the best method to position images in the same way as seen in the screenshot

Any tips on aligning images shown in the screenshot? Please note that the images will be from the backend. https://i.stack.imgur.com/LnYLM.jpg I experimented with code to position images using top, right, left, and bottom properties, but it becomes cumb ...

javascripthtmlcssbootstrap-4

Tips for deactivating a text field once a selection drop-down option has been chosen

I have been searching for a while on the internet but I couldn't find what I was looking for. How can I disable a text field when a select drop down is selected with a value (not empty)? It would also be nice to toggle it. When there is no option se ...

javascriptjqueryhtmlcss

What are the steps to create a horizontal submenu in WordPress?

Is there a way to change the default vertical sub menu of my main menu to horizontal? The CSS for the sub menu in stylesheet.css is as follows: .main-nav>ul>li .sub-menu> li { padding:0 20px; } .main-nav>ul>li .sub-menu> li:first-ch ...

csswordpress

Selenium runs smoothly when used in unittests with Python, yet it encounters an import error when integrated with Django's manage.py

After using Selenium IDE, I have generated this file: from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.ui import Select from selenium.common.exceptions import NoSuchElementException import unittest ...

pythondjangoseleniumfunctional-testingimporterror

How to create a Vue.js animated navbar with scroll opacity

I am looking to create a fixed navbar that changes opacity based on user scrolling behavior. Initially, I want the navbar background to be transparent and then transition to white as the user scrolls down the page. An example of what I am trying to achieve ...

javascriptjquerycssvue.js