Is there a way to confirm if text is bold in an Angular website using Selenium with C#?

I am currently attempting to determine if text is displayed in a bold format within a free text area. However, when I try to select the element, I am unable to verify the text portion.

I attempted to use .getCSSValues based on the provided link suggestion for duplicates, but this method does not retrieve the 'text' from the freetext area, since it is in a string format. The freetext area, being an element, poses some challenges.

IWebElement isBold = _driver.FindElement(By.TagName("p"));
isBold.GetCssValue("font-weight");

Unfortunately, the font weight consistently returns "400" regardless of whether or not the text is actually displayed in a bold typeface.

The HTML code snippet is as follows:

<div class="fr-element fr-view" dir="auto" contenteditable="true" aria-disabled="false" spellcheck="true"><p style=""><strong>TEXT</strong></p></div>

Given that the selected text should be displayed in "700" font weight when bold, this result seems unexpected.

c#cssangularseleniumwebdriverwait

Answer №1

It seems like you were almost there. There are a few key things to keep in mind:

  • Since the element is an Angular element, you'll need to use WebDriverWait with the ElementIsVisible() method to locate it.
  • You can then utilize the GetCssValue() method to retrieve the value of font-weight.

  • You have different options for Locator Strategies:

    • cssSelector:

      new WebDriverWait(driver, TimeSpan.FromSeconds(20)).Until(ExpectedConditions.ElementIsVisible(By.CssSelector("div.fr-element.fr-view>p>strong"))).GetCssValue("font-weight");

    • xpath:

      new WebDriverWait(driver, TimeSpan.FromSeconds(20)).Until(ExpectedConditions.ElementIsVisible(By.XPath("//div[@class='fr-element fr-view']/p/strong[text()='TEXT']"))).GetCssValue("font-weight");

Answer №2

Emphasizing doesn't necessarily mean your text will appear bold.

Instead, it indicates that your content should be highlighted to stand out from the rest of the text in a paragraph.

The perception of boldness is often due to browsers automatically applying bold font settings to emphasized elements. Selenium's inner workings are a mystery to me, but headless browsers may not display these styles, resulting in non-bold text (and this is just one example among many).

This principle applies to all HTML elements: they define structure, not style:
HTML focuses on organization, while CSS handles appearance.

To ensure all emphasized elements have bold fonts, you can use the following code:

em {
  font-weight: bold;
}

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

You are unable to use indexing with [] on a method group expression, specifically concerning how to output an array

I have an array called nums, which contains integer variables and is in 2D format. int[,] nums = new int[lines, row]; I want to output each line in the array on a separate line. When I attempted to print the array using the following code: for (int i ...

c#arraysforeach

Fixing a Deprecation Warning in Java related to Firefox ProfilesIni being deprecated can be achieved through various methods

When trying to use my custom Firefox profile, I encountered a Deprecation Warning with the following code: ProfilesIni myProfile = new ProfilesIni(); How can I resolve this issue while avoiding the @SuppressWarnings warning? import org.openqa.selenium.Web ...

javaseleniumselenium-firefoxdriversuppress-warningsdeprecation-warning

Stylish dropdown menu design inspired by W3CSS website

I recently implemented a CSS dropdown menu example that I found on a website, but it's not working with my code. I double-checked for typos but couldn't find any. Even when I tried to directly copy the code and replace the content with my own, i ...

htmlcssdropdown

Minimizing the font size of a single page

I have a section on my Drupal website that appears on both the homepage and the testimonials page. After increasing the font size of this section, I noticed it looks good on the homepage but not on the testimonials page! Homepage: Testimonials page: Th ...

htmlcssdrupaldrupal-7

The communication between Angular 2 and ASP.net Core via a POST request is not functioning properly, as the server side is receiving a null value

Backend, ASP.net Core API: [Produces("application/json")] [Route("api/[controller]")] public class StoriesController : Controller { public static List<Story> STORIES = new List<Story> { new Story ...

c#asp.netangularjsangular

Hover over thumbnail for more information

I'm in the process of setting up our forum and have already implemented a verification system. However, I'm interested in creating a tooltip similar to the one on Facebook. When you hover over the check image, text will appear. I've tried v ...

htmlcsstooltip

View text preview split across multiple pages

When using the <p> tag to display information, I noticed that when I print preview it, the words are split onto another page. Is there a way to prevent this from happening? See the sample below: https://i.sstatic.net/1EHIV.jpg ...

htmlcssprintingparagraph

'Error: Script ngcc is missing in NPM' - Issue encountered

Out of nowhere, my Visual Studio Code project suddenly began showing two strange errors like this: click to view image All the tags from Angular Material are now being marked as errors, failing to get recognized as valid tags. Attempting to use npm run n ...

angularnpm

Using ASP.NET chart control to display data points with a datetime x-axis

Currently, I am exploring the functionalities of the asp chart control. I am looking to incorporate data points in my chart using datetime data on the x-axis. While delving into the concept of datapoints (though not extensively), I discovered that it onl ...

c#asp.netdata-visualizationmschart

How can I adjust the size of the renderer in Three.js to fit the screen?

Encountering issues with the code snippet below: //WebGL renderer renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); //TODO: set optimal size document.body.appendChild(renderer ...

javascripthtmlcssthree.js

Creating a personalized pop-up container similar to the style seen on YouTube

I am looking to create a popup window similar to the YouTube share feature where it sticks next to a button. I have tried using Bootstrap modal, but it opens in the middle of the screen. I want the popup to appear around the button when the YouTube share b ...

csspopupwindow

Ensure images are correctly aligned

Could really use some help with this issue I'm having. It's probably a simple fix for all you experts out there, but I can't seem to align my images properly so they are even and not one higher than the other. Please take a look at the scree ...

htmlcssimage

Utilizing dynamic variable addition and application outside of a for loop in Selenium

My current automation challenge involves extracting numerical values from links in a Selenium Weblist, adding them together, and then verifying if the total count matches a specific number. The issue lies in the fact that these numerical values are enclos ...

javaloopsseleniumautomation

What is the best way to locate the precise value with xpath in Selenium WebDriver for text that includes &nbsp;?

I am encountering a challenge when trying to select the specific text 'Section' from the code using xpath. ** Just to clarify, I need the exact text selection to be extracted from the innerText or innerHTML of the element, not based on the id. * ...

seleniumxpathexact-matchnon-breaking-characters

Obtaining parameters from a URL using C# and AngularJS

I'm encountering difficulties when trying to fetch parameters from my API URL. Any assistance would be highly appreciated. This is the C# code snippet [Route("api/[controller]")] public class PasswordController : Controller { private re ...

javascriptc#asp.nettypescript

How can I customize button colors in react-bootstrap components?

Changing colors in react-bootstrap may be a challenge, but I'm looking to customize the color of my button beyond the primary options. Any suggestions on how I can achieve this using JS and SCSS? ...

javascriptcssreactjsbootstrap-4react-bootstrap

What could be the reason for the XUnit plugin failing to function properly in Jenkins?

When launching the tests IDE (selenium) from Jenkins and uploading the XUNIT plugin for a detailed test report, an ERROR message appeared at the end: Tests failed, see result file for details: D:\FTP\stm_atos_automatisation\rapports\ ...

seleniumjenkinsxunit

Making the text gradually disappear at the bottom of a section using a see-through overlay, while ensuring the height remains within the boundaries of the section even

Trying to achieve a sleek fade-out effect at the end of a text section for a 'read more' indicator. I've been studying various tutorials, including this, and my current code is as follows: html <section> <p>Lorem ipsum dol ...

csshtmlfadefadeoutfadein

Convert JSON properties using NewtonSoft JsonConverter to rename a property to the value of another property

In my project, I have created a custom class called ValueInteger: public class ValueInteger { [JsonIgnore] public string ValueName { get; set; } public int Value { get; set; } [JsonProperty("timestamp")] public UInt64 TimeStamp { get ...

c#jsonserialization

React Components Changing Route Leads to Empty Display

My current challenge involves setting up dynamic routing in my application to enable the viewing of products from different stores. Essentially, I am developing an app where users can add stores and browse through their items. I have implemented a dynamic ...

javascripthtmlcssreactjsreact-router