Width mismatch for certain elements in certain layouts

[kadarkarai selvam]

Hi Everyone,

I was using the Galen framework for layout testing and here is the issue, I come across. Kindly provide me your inputs to proceed along

Galen version: 2.4.4

Usage: Maven project with Java 

Verification method

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

Layouts issue is occurring

Tablet Portrait - 768 X 1024

Tablet Landscape - 1024 X 768

Mobile Portrait - 360 X 640

Mobile Landscape - 640 X 360

Mobile 2 Portrait - 414 X 896

Layouts issue is not occurring in

Mobile 2 Landscape portrait - 896 X 414

all desktop layouts 1366, 1980, 2560 etc.

Usage

1. Uses the arguments in chrome options to make the browser accomondate larger resolution in my 1920X1080 laptop resolution

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

Note: Verified by commenting the 1st step too

2. Uses Selenium manage.window method to resize the browser

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

Issue description

1. I have a login page with a few elements in it.

2. I am checking the element's attributes in different layouts using the above mentioned  checkLayout  method

3. While verifying the element using chrome simulator (i.e, in dev tools -> select toggle device toolbar) and select the tablet resolution i.e. 768X1024 (or a few other resolutions listed above)

4. The element has a width (say 395px for username field) in the chrome simulator.

5. I have used the same in galenspec and verify for the layout

6. Galen says the element is having an issue and shows different width (507px)

While debugging it is found that it is showing up the wrong image location in the report too.

Attached is part of the report

HTML source

<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;

}