Using compound class selectors in RobotFramework with Selenium to target specific elements

Attempting to monitor the on-screen status of an element that transitions from :

class="slide-out-div contrastBoxDark closed"

to

class="slide-out-div contrastBoxDark"

however, when using

Page Should Contain Element    class:slide-out-div.contrastBoxDark

it results in 

InvalidSelectorException: Message: invalid selector: Compound class names not permitted

If compound class names are not allowed, what would be a suitable locator and attribute here? Tried this, but it did not work:

css:slide-out-div.contrastBoxDark
cssseleniumrobotframework

Answer №1

In order to correct your CSS selector, make sure to include a . (dot) before the class name slide-out-div. You can use the following syntax to fix it:

css:.slide-out-div.contrastBoxDark

Answer №2

When using the search by class, remember that you can only use one class name at a time. If you need to locate an element with more than one class name, consider using a CSS selector:

For elements with the class "opened" try:

css:[class="slide-out-div contrastBoxDark"]
css:.slide-out-div.contrastBoxDark:not(.closed)

For elements with the class "closed" try:

css:[class="slide-out-div contrastBoxDark closed"]

Keep in mind that 

css:.slide-out-div.contrastBoxDark
will match both "closed" and "opened" elements...

Additionally, be aware that your CSS selector 

css:slide-out-div.contrastBoxDark
will not function properly as it is meant to target something like 
<slide-out-div class="contrastBoxDark">...</slide-out-div>
. You must include the dot before the first class name for it to work correctly.

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

I have developed a custom jQuery carousel that includes functionality to start and stop the carousel based on specific conditions

I have set up a jQuery carousel that moves to the left when a checkbox is checked, but I need it to stop moving when the checkbox is unchecked. Can someone help me achieve this? $("#checkBox").click(function(){ if($(this).prop("checked") == true){ ...

javascriptjqueryhtmlcss

Toggle the active class on the parent element when it is clicked

I'm encountering a problem with my JavaScript - attempting to make this function properly. Firstly, here is the desired functionality: 1.) Add or remove the 'active' class from the parent element when clicked 2.) When clicking inside the ...

javascriptjqueryhtmlcss

Navigate to the following section on an HTML page by clicking a button using jQuery

Within my application using Jquery / Javascript, I am looking to implement a specific functionality. I currently have several div elements like the ones below: <div id="div1"></div> <div id="div2"></div> <div id="div3"></ ...

javascriptjqueryhtmlcss

Scrolling animations do not support the Translate3d feature

I'm struggling to implement a smooth scroll effect on the header of my website. My approach involves using transform:translate3d for animation, with the goal of keeping the header fixed at the top and moving it out of view as the user scrolls down. I ...

jquerycss

Arrange containers into a tower?

Currently, I am exploring the concept of stacking boxes. While I have a solid grasp on how to stack them vertically from top to bottom, I find myself puzzled about how to stack them horizontally. Check out my vertical stacking method here See how I a ...

htmlcss

Close the space between the image and the Container

Looking at the image, you can view the demo http://jsfiddle.net/yJUH4/8/ Upon observing the picture, a slight gap appears between the image and the Container. The image already has the css property vertical-align:middle. When I increase the height of the ...

htmlcss

What could possibly be causing this element to shift side to side (in IE only) during the CSS animation?

UPDATE: Issue occurring on Internet Explorer 10, Windows 7 When using the transform property to adjust the horizontal position of an element during animation, the vertical value is updated as well. However, despite setting the horizontal value to the same ...

javascripthtmlcsscss-animations

Vibrant diversity in a solitary symbol

I have customized styles to incorporate Fontawesome icons with their brand colors - for instance, the Opera icon appears in red, IE in blue, and Firefox in orange. Chrome, however, presents a unique challenge with its four distinctive colors. I am curious ...

cssfont-awesomefont-awesome-5

The media query does not apply to other pages because they are not responsive

Currently experiencing an issue with fullpage.js on my single page website. The home page fits perfectly within the viewport, but for subsequent pages, the bottom portion is not visible on the same media query. ...

javascriptcsstwitter-bootstrapmedia-queriesfullpage.js

During DragAndDropToObject in Selenium IDE, the initial element in the list is overlooked

I have a webpage that is split into two datagrids. The left datagrid is structured like this: <ul class="left_dg"> <li> <ul></ul> </li> <li> <ul></ul> </li> <li&g ...

jqueryhtmlcssseleniumdrag-and-drop

Embedding a CSS class within the primary class selector

Can someone help me with this HTML challenge? <div class="span3"> <div class="abc">code for first div</div> <div class="abc">code for second div</div> </div> I'm trying to hide the first "abc" division within th ...

htmlcss

Investigate the CSS display property of an element using JavaScript

Can JavaScript be used to determine if an element's CSS display == block or none? ...

javascriptcss

Excessive White Space Found at the Bottom of Angular / Material / Bootstrap Website

Currently, I'm utilizing Angular Bootstrap for my development needs. Upon viewing the page in a browser, I noticed some extra white space at the bottom, and I can't seem to identify the cause. Below is the base code being used. The modification ...

htmlcssangularbootstrap-4angular-material

position: absolute is only applying to the initial item

I have a user card component with a menu button at the top that should display a menu when clicked. The issue I'm facing is that when I click on the menu button of the other user cards, the menu still shows on the first card instead of the one I click ...

javascripthtmlcssvue.jsvuejs2

Align FontAwesome icons of various sizes vertically in a bullet-point list

Our website is built using Bootstrap v4.6.2 and FontAwesome 5.15.4. The following HTML code snippet displays an unordered list with FontAwesome icons of different sizes (0.8em vs 0.44em). <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/ ...

htmlcssbootstrap-4font-awesome-5

Style the div element with CSS

Is there a way to style a div element within an HTML document using Sencha framework? I have specific CSS properties that I would like to apply to my div. #logo{ position:absolute; top:20%; left:0%; } Below is a snippet of my Sencha code: Ex ...

javascriptcsssencha-touchextjs

Having difficulty choosing an item from the drop-down menu

Here is the html snippet I am working with: <select id="80211Mode_5" onchange="ChangeWidthList('5')" name="80211Mode_5" sb="74332008" style="display: none;"> <option value="802.11a">802.11a only</option> <option value="8 ...

seleniumselenium-webdriverdrop-down-menu

Selenium - caught in a web frame

Currently, I am facing a challenge in navigating back to the parent frame from a frame that contains a tinymce editor. After successfully navigating to the tinymce frame using driver.switchTo().frame(1), I attempted to return to the parent frame by using d ...

javaseleniumselenium-webdriver

What is the best way for selenium to locate an element with a changing Id?

While working with Selenium automation, I've encountered an issue where the element ID changes every time the page is refreshed. Regardless of whether I use XPATH, CSS Selector, or ID, they all contain a changing number. The code I'm currently u ...

pythonseleniumselenium-webdriver

collection of random header images for a ruby on rails website

Can anyone help me with an issue I'm having? I am trying to randomize images in a header on a category page using the following code, but it doesn't seem to be working. I keep getting this error: Invalid CSS after "...ackground: url(": expected " ...

cssruby-on-railsruby