Is there a way to verify text position or location?

I am putting together some code acceptance tests with Katalon Recorder. Have done this many times in the past, but now I need to verify something I have not done before - verify the location of label/headers on the page. I just need to check whether they all line up correctly. See pic - all the labels should have the same left margin. Only the bottom two lines (Color Company, Color ID) are in the correct position. Any way to check for that?

Test Pic

Let me ask you a question. As seen in the following screenshot, Comment: is displayed away from Color Company:. Possibly you want Comment: to be displayed left-aligned, in line with Color Company:.

Can you tell us why Comment: is located as such ?

label

I guess, Comment: and Color Company: have different Cascading StyleSheet properties assigned. Are you aware of the style differences?

If you find difficulties to find how the style properties are set to each of Comment: and Color Company:, then you should get familiar with Google Chrome DevTools. The Chrome DevTool let you inspect CSS properties of every single HTML element. Have a look at the following article:

All of those labels are supposed to be left aligned. There was simply an issue where someone left out a . Any bug we have and fix we are trying to add as part of our testing automation to make sure the bug is gone. So I’m looking to find a way to automate verifying that all of the labels have the same left alignment. Is there a way to do that with Katalon?

You can get the CSS properites of each indivisual HTML elements using WebUI.getCSSValue() keyword.

I think that this keyword is enough for you to write a test case script which verifies all of the labels have the same left alignment.

@eric.oswald I have never had to use it, but there is WebUI.getElementLeftPosition(). Or see if WebUI.getAttribute() using the offsetLeft attribute works for this.

There is also the use of findElements(By.something(‘xx’)) along with element.getLocation().getX() that could work.

You could save the return value and then WebUI.verifyEqual() to compare all the values to the saved one or just:

WebUI.verifyEqual( WebUI.getElementLeftPosition(ele1), WebUI.getElementLeftPosition(ele2))
WebUI.verifyEqual( WebUI.getElementLeftPosition(ele1), WebUI.getElementLeftPosition(ele3))
WebUI.verifyEqual( WebUI.getElementLeftPosition(ele1), WebUI.getElementLeftPosition(ele4))

It doesn’t actually tell you it is on the left side, but only all values are equal.