2

我正在使用Galen 框架进行布局测试，这就是我遇到的问题。请向我提供您的意见以继续进行

盖伦版本：2.4.4

用法：使用 Java 的 Maven 项目

验证方法

LayoutReport layout = Galen.checkLayout(getDriver(), getGspecpath(), Arrays.asList(resolution));

以下布局中出现布局问题

  • 平板电脑纵向 - 768 X 1024
  • 平板电脑风景 - 1024 X 768
  • 移动肖像 - 360 X 640
  • 移动风景 - 640 X 360
  • 移动 2 纵向 - 414 X 896

布局问题未发生在

  • 移动 2 横向纵向 - 896 X 414
  • 所有桌面布局 1366、1980、2560 等。

用法

  1. 使用 chrome 选项中的参数使浏览器在我的 1920X1080 笔记本电脑分辨率下适应更大的分辨率

    options.addArguments("force-device-scale-factor=0.60");
options.addArguments("high-dpi-support=0.60");

    注意：也通过评论第一步进行验证

  2. 使用 Selenium manage.window 方法调整浏览器大小

    getDriver().manage().window().setSize(dimension);

问题描述

  1. 我有一个登录页面，其中包含一些元素。
  2. 我正在使用上面提到的 checkLayout 方法检查不同布局中的元素属性
  3. 在使用 chrome 模拟器验证元素时（即在开发工具中 -> 选择切换设备工具栏）并选择平板电脑分辨率，即 768X1024（或上面列出的其他一些分辨率）
  4. 该元素在 chrome 模拟器中具有宽度（例如，用户名字段为 395px）。
  5. 我在 galenspec 中使用了相同的内容并验证了布局
  6. 盖伦说元素有问题并显示不同的宽度（507px）

调试时发现它也在报告中显示错误的图像位置。

HTML 源代码

<div class="input-wrapper grm-form-group floating">
   <input id="loginUsername" type="text" name="username" class="loginField" tabindex="0" required="">
   <label for="loginUsername">Username</label>
</div>

CSS

.grm-form .grm-form-group {
    position: relative;
    margin-bottom: 24px;
}
4

0 回答 0