When trying to test my computed font size, Test Studio is failing my step on a paragraph tag, even though the F12 dev tools show it being the right value. The html is set to 14px and the body is set to 1rem. When I look at the computed value, it shows 14px, but expanding it out, it'll also show the 1rem value kicking in from a css value, but that doesn't change the fact the computed value is still 14px.
This <p> at 14 px step passes in every browser EXCEPT Internet Explorer.
I've created this scratch pad (http://scratchpad.io/mean-color-1243) to showcase the issue. If you test on the <p> tag of "This is an example of the 1rem issue" for a computed font size of exact/same 14px, you'll see it'll pass in the other browsers but fail in IE. If you look in your F12 dev tools in IE, you'll see it showing the computed value as 14px.
Is there something I'm doing wrong?
3 Answers, 1 is accepted
Hello Robert,
Thanks for preparing a sample page to demonstrate the issue - it is really helpful for us.
To be honest, I am not familiar in depth with web design and some of the following assumptions may not be quite accurate. However, I managed to sort out that the REMs are a way of setting font-sizes based on the font-size of the root HTML element. I am not sure how these are affected by the css styles applied on a page, but I suspect that the different browsers are using and rendering all these in different way.
Here is what I found out with the help of the sample page - adding a verification step, to check the font size of the paragraph in question, is different in Internet Explorer and the rest of the browsers (Edge Beta and Firefox tested) - please see the attached screenshot. It seems that Test Studio detects differences in the DOM tree loaded in the different browsers and thus the step recorded in Firefox will not work against IE, and vice versa - the step recorded in IE will not work against the other browsers.
Still there is an option to workaround this inconsistent behavior - each step in Test Studio can be excluded from the test execution based on which is the browser to run the test against. This is a step property named RunsAgainst in which you can choose the specific browser to execute the step against. So, you can have the respective step for each browser you need to run the tests against.
Please, let me know if this information is helpful for you and if there is anything else you need to discuss.
Thank you for cooperation in advance.
Regards,
Elena
Progress Telerik
Rank 1
I do still find it frustrating IE's F12 dev tools is reporting a computed font-size of 14px, which is suppose to be what Test Studio is testing on, yet Test Studio is only comparing the latest CSS value of 1rem, not the computed value. In my dev environment, the 1rem is coming from a Bootstrap library - not something that is practicably editable, as it would be lost as soon as we upgrade to the latest version.
Hi Robert,
Thanks for getting back to me - I am pleased to know the shared information was helpful for you.
I completely agree with you that that having two different steps for different browsers may be frustrating. However, I have to admit that probably this depends on how Test Studio communicates with the browsers and since the approach used for IE is a bit different than for Chrome or Firefox, this may results in the mentioned difference.
I hope the proposed workaround will be useful for you and of course, in case you need any further assistance, please do not hesitate to get back to us.
Thanks once again for your cooperation.
Regards,
Elena
Progress Telerik