Retrieving the CSS property value from a website with Selenium

Hello there!

For the purpose of verifying the font size of a CSS element on getbootstrap.com using Selenium in the Firefox browser, I rely on this particular script:

#!/usr/bin/env perl

use strict;
use warnings;
use Test::More;
use Selenium::Firefox;
my $url = 'http://getbootstrap.com';
my $driver = Selenium::Firefox->new();
$driver->get($url);
my $elt = $driver->find_element(
 'h1.mb-3.fw-semibold', 'css');
is $elt->get_css_attribute('font-size'), '72px',
 'Masthead font size is unchanged';
$driver->quit();
done_testing;

Upon running the script, the test unfortunately does not pass:

❯ ./selenium_properties_css_attribute.pl 
not ok 1 - Masthead font size is unchanged
#   Failed test 'Masthead font size is unchanged'
#   at ./selenium_properties_css_attribute.pl line 12.
#          got: '64px'
#     expected: '72px'
1..1
Killing Driver PID 4132 listening on port 45685...
# Looks like you failed 1 test of 1.

I would appreciate insights on why the aforementioned test is failing. Despite confirming a font size of 72px for the h1.mb-3.fw-semibold element on getbootstrap.com in the Computed tab within the Firefox browser, we are observing a result of 64px during the test execution. What could be causing this discrepancy?

An included screenshot showcases the font size as being 72px:

https://i.sstatic.net/diVpL.png

Answer №1

Within the heading's CSS, there is:

.bd-masthead h1 {
  font-size: calc(1.525rem + 3.3vw);
}

This means that the font size adjusts based on the viewport width. The width of the Firefox browser viewport is not being directly manipulated.

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

Creating a three-column HTML form layout solely with CSS, and steering clear of any libraries or dependencies, is a task

Is there a way to implement a three-column HTML form layout according to the design depicted in the linked image? https://i.sstatic.net/XJQzJ.png Shown above is the sample HTML code for the template. What I am looking for is the proper CSS styling to ach ...

Guide on incorporating a URL link into an <a class=> tag

Working on a Wordpress website, I encountered an issue in the widget section where I can't get any URL code to work! Here is the current code snippet; [one_third] <a class="home-buttons" href="http://example.com/mortgage-calculator"><i clas ...

The CSS method to conceal the initial list item is proving ineffective

I'm having an issue with my WordPress theme where I want to hide only the first li element but it's hiding all of them. Here is the HTML code I'm using: <div class="nav"> <ul class="nav-tabs nav-justified"> <li class="activ ...

Arranging Check Boxes Side by Side

I am struggling to properly align the three checkboxes and tables next to each other. I have managed to get the checkboxes on the same row, but aligning them neatly has proven to be a challenge. Using Notepad++ as my development tool, I am facing formattin ...

Update the background image to be smoother, with no text overlay

I am working on a website where I need to smoothly change between background images. Here is the JavaScript code I currently have: var bg=[ 'images/best.jpg', 'images/61182.jpg', 'images/bg.jpg' ...

Having trouble with the Handlebars {{#if}} and {{elseif}} block helpers not functioning properly?

When working with handlebars.js, I am faced with the task of parsing complex JSON and displaying names in different styles based on certain conditions. The JSON structure is as follows: "TradeLine":{ "TradeLine":{ "Mor ...

In Firefox mobile, a fixed positioned element will move with the page until the scrolling comes to a halt

I am facing an issue with a CSS element set to position: fixed. While it works perfectly on desktop browsers, it behaves poorly on mobile browsers, especially Firefox. The main problem is that the fixed element scrolls along with the page and then abrupt ...

Troubleshooting issues with custom global components failing to apply styling in NuxtJs

I have designed various components such as buttons that I want to be able to use and reuse across my entire website. I have already developed plugins Object.entries(components).forEach((([name, component]) => { Vue.component(name, component) })) and ...

Extracting links using Selenium WebDriver

I have the following HTML source code: <ul class="content"> <li class=""> <div class="profile-card"> <div class="content"> <a href="https://www.linkedin.com/in/ouafae-ezzine-894b113"> Ouafae ...

How can I send styles to a child component and utilize them as scoped styles within Vue?

One of my components is a parent: <template> <ChildComponent :styles="styles" /> </template> <script> export default { data: () => ({ styles: ` p { color: red } ` ...

Having difficulty aligning block element in the center horizontally

I am struggling with centering elements for a list of upcoming blog posts. The Postlist component is integrated into my App.js file. Although I successfully centered the navigation bar following the method described here in the Horizontally section and spe ...

Utilize the before and after pseudo-elements to create a stylish divider

Utilizing Pseudo-elements :before and :after to create a line that appears before and after a title with the help of an image: .mydiv::before { content: url(img/line.png);} .mydiv::after { content: url(img/line.png);} Here is the current output: However ...

When the Model popup is activated, it is essential for elements to have an adequate color contrast

Our team is utilizing the axe dev tool for accessibility testing. We encountered an issue where elements behind a model popup (Kendo React model with position: absolute) were displaying insufficient color contrast errors. Upon changing the absolute positio ...

What is preventing the text below from being condensed into an ellipsis?

Here is the code snippet: <div class="grid w-full gap-4 grid-cols-8"> <div class="flex w-full flex-col gap-1 justify-center items-center max-w-small cursor-not-allowed"><svg xmlns="http://www.w3.org/2000/svg" ...

CSS is effective when styling table elements such as 'tr' and 'td', but encounters issues when trying to include 'th'

I have a variety of tables on my website, most of them without borders. However, I want to add borders to some of them. In my CSS, I am using a specific class for those tables: table { padding: 2px; border-collapse: collapse; table-layout: auto; te ...

position the div correctly above the table

I am currently working on creating a scheduler that has specific requirements: Show the working hours for each resource Show the interviews, allow changing the interview duration by resizing, and move the interviews using drag-and-drop functionality. I ...

What's the best way to adjust text color to black or white for maximum contrast when the background changes?

Currently, I am attempting to replicate the email element found on this website: .custom-blend-mode { mix-blend-mode: difference; } Although I have managed to make it work, it results in a change to the opposite color. Ideally, I would like it to remai ...

I am looking to place two HTML buttons next to each other on the same line

I am trying to display two HTML buttons next to each other on the same line, with the "Submit Request(s)" button appearing first. The issue I am facing is that the top of the second button aligns with the bottom of the first one. The second button is cor ...

Create Stunning Half-Brick Image Layouts Using HTML and CSS

Can anyone offer advice on creating complex image layouts such as the half-brick pattern using HTML, CSS, and jQuery? I am looking to be able to rotate and scale the image as well. The background-image CSS property does not seem to support scaling. I have ...

Tips for retrieving formatted text layout from the database

I recently encountered an issue when adding text to my MySQL database using a textarea. The format of the text, including newlines and spaces, was saved in the database but not displayed as such when viewed directly. When I retrieve this string from the da ...