Determine the fill color attribute value of a rectangle using Testcafe paired with typescript

Question

Determine the fill color attribute value of a rectangle using Testcafe paired with typescript

Here is a code snippet I need help with:

<colored-item label="Label A" symbol-size-left="9.5" symbol-size-right="12" symbol-right="" symbol-left="<svg viewport="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
  <rect x="0" y="0" width="24" height="24" stroke="black" fill="rgb(0, 91, 142)" stroke-width="0" />
  </svg>" small-font="true"></colored-item>

I'm trying to extract the value of the "fill" attribute (which is "rgb(1, 89, 138)").

So far, I've attempted the following:

const fillColor = await Selector('colored-item').getAttribute('symbol-left');

This returns:

<svg viewport="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
  <rect x="0" y="0" width="24" height="24" stroke="black" fill="rgb(1, 89, 138)" stroke-width="0" />
  </svg>

When I tried

const fillColor = await Selector('colored-item').withAttribute('symbol-left').getAttribute('fill');

the result was "null"

Does anyone have a solution to directly access the "fill" attribute?

Otherwise, would I need to resort to using regex?

javascript testcafe

Answer 1

Answer №1

My understanding is that you have placed the SVG element within the attribute of the colored-item. However, in order to actually display this SVG on the page, it needs to be added to the DOM. Testcafe is designed to search for elements within the DOM, so you will need to locate the appropriate DOM elements on the page and determine the exact selector to use. Based on the information available, you can retrieve these attributes directly from the rect element:

await Selector('rect').getAttribute('fill')

Answer 2

My understanding is that you have placed the SVG element within the attribute of the colored-item. However, in order to actually display this SVG on the page, it needs to be added to the DOM. Testcafe is designed to search for elements within the DOM, so you will need to locate the appropriate DOM elements on the page and determine the exact selector to use. Based on the information available, you can retrieve these attributes directly from the rect element:

await Selector('rect').getAttribute('fill')

Answer 3

Answer №2

After some perseverance, I managed to crack it using regex:

const fillColor = await (Selector('colored-item').getAttribute('symbol-left')).match(/fill="?([\d\w\(\ \,\)]*)"/)[1];

To apply this to your code, simply replace fill=" with the specific string you want to exclude, and replace the

" 
here 
)"/

with the character or string you want to serve as the end point.

This will yield a match and a group. To capture the group, add [1] as shown in the snippet above.

Answer 4

After some perseverance, I managed to crack it using regex:

const fillColor = await (Selector('colored-item').getAttribute('symbol-left')).match(/fill="?([\d\w\(\ \,\)]*)"/)[1];

To apply this to your code, simply replace fill=" with the specific string you want to exclude, and replace the

" 
here 
)"/

with the character or string you want to serve as the end point.

This will yield a match and a group. To capture the group, add [1] as shown in the snippet above.

Determine the fill color attribute value of a rectangle using Testcafe paired with typescript

Answer №1

Answer №2

Similar questions

Make sure that a specific script is loaded prior to another script

Identify the position of a mouse click event when dots overlap

A guide on executing a double click action on an element in Selenium Webdriver with JavaScript specifically for Safari users

JavaScript: Obtaining a Distinct Identifier for Various Replicated Entries

Place the new item right under the chosen items within the nested list

Jquery Ajax is met with a 400 error indicating a BAD request

Why is it that useEffect is functioning correctly only on the first occasion?

Troubleshooting NodeJS CORS issue in Vue project as localhost API calls fail

What are the steps to verify if an iframe is lacking content?

Is there a way to change the format of the date "Wed Jan 01 2020 00:00:00 GMT+0530 (India Standard Time)" to JAN 01, 2020 in JavaScript?

Encountering an issue while attempting to generate a dialog popup with jQuery

Leveraging Javascript to retrieve input values

Connection issue occurred with Mongodb server causing failure to establish a connection

Tips for managing boolean values in a JSON data structure

Uploading video files using XMLHttpRequest encountered an error on a particular Android device

Search for objects in the array that have the same name, and then combine the values of those matching

Retrieve JSON Data Using Angular in a Wordpress Environment

The `stream.Transform.unshift()` method in Node.js

Guide on adjusting the CSS styling of elements in real-time from the backend using a user customization panel to modify the appearance of various web pages

The code is nearly identical except for one issue that causes an infinite loop within useEffect