Choosing an element that does not have a particular string in its colon attribute name

Question

Choosing an element that does not have a particular string in its colon attribute name

In my code, I have multiple elements structured like this:

<g transform="matrix">
   <image xlink:href="data:image/png" width="48">
</g>
<g transform="matrix">
   <image xlink:href="specific" width="48">
</g>
<g transform="matrix">
   <image xlink:href="specific" width="48">
</g>

My goal is to select an element that does NOT contain 'specific' in its name. The challenge lies in the fact that sometimes there are multiple of these non-specific elements and other times none at all. However, there will always be exactly one non-specific image.

The issue I am facing is due to the presence of ':' in the attribute name.

This is what I have attempted so far:

public static getEventIconOnMap: ElementFinder = 
element.all(by.css('image[width="48"]:not(image[xlink\\:href*="specific")')).last();

html css typescript webdriver protractor

Answer 1

Answer №1

I'm having trouble understanding your code and how to test it, but I believe the following code might work. Try escaping the character like this:

public static getEventIconOnMap: ElementFinder = 
   element.all(by.css('image:not([xlink\:href*=specyfic]')).last();

Here is a CSS selector that should work, so adjust it to fit your code:

image:not([xlink\:href*=specyfic]) {
  // your code
}

Check out this working fiddle - while it's not identical to your code, I wrote it as a css selector: https://jsfiddle.net/x4gsr658/

Answer 2

I'm having trouble understanding your code and how to test it, but I believe the following code might work. Try escaping the character like this:

public static getEventIconOnMap: ElementFinder = 
   element.all(by.css('image:not([xlink\:href*=specyfic]')).last();

Here is a CSS selector that should work, so adjust it to fit your code:

image:not([xlink\:href*=specyfic]) {
  // your code
}

Check out this working fiddle - while it's not identical to your code, I wrote it as a css selector: https://jsfiddle.net/x4gsr658/

Choosing an element that does not have a particular string in its colon attribute name

Answer №1

Similar questions

In React, when utilizing the grid system, is there a way to easily align items to the center within a 5 by

Is it possible to apply a background image on top of an existing image?

Guide on Implementing jQuery Plugin with Vue, Webpack, and Typescript

``When you click, the image vanishes into thin

Brick-themed HTML/CSS elements drift away from each other

Introducing cutting-edge intellisense for Typescript Vue in VSCode, featuring automatic import functionality specifically designed for the

Attempting to incorporate country flags into the Currency Converter feature

Docz: Utilizing Typescript definitions for props rendering beyond just interfaces

Is it possible to make an image gradually appear and disappear?

Guide to incorporating the content of a div into an image source using PHP

Enhanced spacing of characters in website text

Tips on modifying the maxlength attributes for all "field answer" class elements

Vue 3 - Compelled to utilize any data type with computedRef

Using JQuery functions from other JavaScript files is Simple

Which event listener in the DOM API should I use to trigger an action when a form field is focused, whether through a mouse click or by tabbing?

Acquire the content of a nested element using jQuery

Focus on a primary window

Which HTML element does each script correspond to?

The importance of understanding Req.Body in NODE.JS POST Requests

The Vue data retrieved from an API using onMounted() is not initially showing up in the DOM. However, it magically appears after I make changes to the template