Selenium获取CSS属性值异常：预期72px实际返回64px

我用Perl编写的Selenium脚本，在Firefox中检测getbootstrap.com页面上h1.mb-3.fw-semibold元素的font-size属性，预期值为72px，但脚本返回64px导致测试失败。但在浏览器控制台的Computed标签中，该元素字体大小显示为72px。

附测试脚本 #

#!/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;

脚本运行报错 #

❯ ./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.

浏览器控制台显示截图 #

核心原因：响应式布局的视口差异 #

Bootstrap是响应式框架，h1.mb-3.fw-semibold的字体大小会根据浏览器视口宽度动态调整：

• 视口宽度足够大（比如桌面端全屏）时，字体大小为72px；
• 视口较小时，会触发媒体查询，将字体大小调整为64px（或更小）。

Selenium启动Firefox时，默认窗口是较小的默认尺寸，页面加载时匹配了小视口的媒体查询，所以脚本拿到64px；而你手动打开浏览器用的是全屏，因此看到72px。

解决办法 #

在脚本中设置浏览器窗口为全屏或指定足够大的尺寸，确保页面加载时匹配桌面端的媒体查询：

方法1：设置窗口全屏 #

在$driver->get($url);之前添加全屏代码：

$driver->maximize_window();

方法2：指定固定窗口尺寸 #

如果不需要全屏，也可以设置一个足够大的固定尺寸，比如：

$driver->set_window_size(1920, 1080);

修改后的完整脚本示例：

#!/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->maximize_window(); # 添加全屏设置
$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;

额外验证点 #

如果问题仍存在，还可以检查：

• 页面是否完全加载：添加等待逻辑，确保元素样式完全渲染后再获取属性，比如使用$driver->wait_for_element_displayed('h1.mb-3.fw-semibold', 10);
• 是否存在动态样式覆盖：有些页面会通过JS动态修改样式，需要等待JS执行完成。

内容的提问来源于stack exchange，提问作者alex2020