集成Galen时Cucumber+Selenium移动端@on标识不生效问题

我之前也踩过一模一样的坑——单纯调整浏览器尺寸确实没用，Galen需要你显式指定设备标签才能触发对应的@on规则，下面是具体的解决步骤：

1. 先搞懂Galen的条件规则逻辑 #

Galen不会自动根据浏览器窗口尺寸推断设备类型，它的@on mobile这类规则是基于设备标签匹配的。你必须在代码里明确告诉Galen：“现在我在跑移动端测试”，它才会执行对应的校验逻辑。

2. 在Java代码中传入设备标签 #

在你的Steps.java或者Helper工具类里，切换到移动端尺寸后，调用Galen校验方法时要传入设备标签列表。比如：

import com.galenframework.api.Galen;
import java.util.Arrays;
import org.openqa.selenium.Dimension;

// 先设置移动端窗口尺寸
driver.manage().window().setSize(new Dimension(375, 667));
// 关键步骤：传入"mobile"标签，触发@on mobile规则
Galen.checkLayout(driver, "src/test/resources/your-layout-spec.gspec", Arrays.asList("mobile"));

如果你用的是GalenPages的方式，也可以绑定TestDevice对象来传递标签：

import com.galenframework.testng.GalenPagesTest;
import com.galenframework.device.TestDevice;
import org.openqa.selenium.Dimension;

// 初始化移动端设备并绑定到测试会话
TestDevice mobileDevice = new TestDevice("mobile", new Dimension(375, 667));
GalenPagesTest.get().setDevice(mobileDevice);
// 后续执行校验时会自动使用设备标签
GalenPagesTest.get().checkLayout("your-layout-spec.gspec");

3. 确认Gspec文件的规则正确性 #

检查你的Gspec文件里的@on规则格式是否正确，确保标签和代码里传入的完全一致：

@on mobile
// 移动端专属校验规则
header {
    width: 100%
    height: 56px
    background: #ffffff
}

@on desktop
// 桌面端规则
header {
    width: 1200px
    margin: 0 auto
}

4. 可选：通过配置文件统一管理设备 #

如果需要复用多设备配置，可以在项目根目录创建galen.config文件：

# 定义移动端设备
devices.mobile.name=Mobile Phone
devices.mobile.size=375x667
devices.mobile.tags=mobile,phone

# 定义桌面端设备
devices.desktop.name=Desktop
devices.desktop.size=1920x1080
devices.desktop.tags=desktop

然后在代码中直接加载配置好的设备：

TestDevice mobileDevice = TestDevice.fromConfig("mobile");
Galen.checkLayout(driver, "your-layout-spec.gspec", mobileDevice.getTags());

这样做的好处是不用在代码里硬写尺寸，后续调整设备参数只需要改配置文件即可，更易于维护。

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