Issue with virtual browser

[svishwakarma]

Actually I recorded a script in browser maximum size and try to run same script in virtual browser then I am getting error.

Basically I need to run my script for mobile browser so I need to create a separate script for mobile browser or I can run same script on mobile browser (virtual browser). 

Please suggest me.

Thanks in advance.

Sandip

[AlexKaras]

Hi Sandip,

Generally speaking, good test code can be executed against any browser.

However, the primary difference between desktop and mobile web pages for the same web application is that different page layout can be used for mobile and desktop ones. And this must be accounted in the test code. The most obvious example: while desktop web page may have a main menu strip, mobile page, most probably, will have not a main menu strip but 'hamburger' icon with drop-down elements of main menu.

Additionally, web application may have some specifics to operate as required under different browsers. If this is the case then test code must also handle this.

P.S.

> in browser maximum size

I never understood the idea behind tests execution in maximized browser...

[ApplePen]

As Alex said the page layout maybe different between pc and phone.

I think avoid use the layout to locate element in pages.

Use xpath or CSS if the element has the same identifier like id in my opinion.

@AlexKaras  About browser maximum size

I met the same problem.

Sometimes elements probably doesn't appear in the page when the browser is not in maximum size.

At the same time, the element cannot be found in Object Browser. I know less front end technology.

So, I don't know how to use JS to operate it. Making the browser maximum size is the simplest way to do it.

Another scene is to check image whether is displayed.

[AlexKaras]

@ApplePen :

Hi,

> Sometimes elements probably doesn't appear in the page when the browser is not in maximum size.

Agree. But at the same time, I've seen a lot of cases when page that looks good in maximized browser (read - in a big enough viewport) becomes visually corrupted on a smaller viewports.

And also, if something is not visible on the page in a smaller viewport and I don't have any hint that this something must be present, how I as a user can get an idea that this something must exist and can be used? Personally I consider such page design to be a bad user experience.

And, finally, personally I used to use windowed but not maximized browsers. (And been a test engineer, I am always happy to see corrupted page layout in a windowed browser. 🙂 )

[svishwakarma]

Thanks for replying.

Yes I am agree that some time element does not appear in mobile view so I recorded a script in mobile view and play then still I am getting below error:

The window size is (0, 0); the screen rectangle: the left top corner is (8, 80), the right bottom corner is (8, 80).

[AlexKaras]

Hi,

This means that your test code tries to interact (click, drag, etc.) with some component that is visible but has zero size and thus interaction with it is not possible.

Try to investigate your tested application in the Object Browser. Most probably, this object either was kind of 'deleted' (this is one of the ways how interaction with some UI element can be made impossible - to make this element o be of zero size) or there is some parent or child element that must be interacted with instead of this zero-sized one.

[ApplePen]

@AlexKaras Your opinion that inspired me. Thanks a lot.

We definitely need to stand as a user to test.

Sometimes, we make automation test cases and ignore that.

I will pay more attention for it later.

About the browser size:

Do you have any suggest how to design it in test?

Ex. Do we test all cases in normal size and retest them in another size?

[AlexKaras]

@ApplePen :

Hi,

> About the browser size:

For example, you may consider the approach like this:

-- Talk with your UI designers or just explore the tested application to find out whether it uses different layouts for different viewport sizes and, if yes, what are sizes (breakpoints) that trigger layout change. As an example: https://getbootstrap.com/docs/4.3/layout/grid/#grid-options;

-- Create test code that makes it possible to drive the tested application using all (or just required) layouts.

Then, you should be able to create a set of required tests according to your test plan.

For example, using the breakpoints from above, you may execute a cursory set of tests setting viewport size to 570, 576, 768, 992 and 1200 pixels and check that UI layout was set properly.

And then execute a full set of functional tests that verify functionality using most expected viewport sizes, for example, 770 and 1600 pixels.

[sonya_m]

AlexKaras and ApplePen, thanks a lot for this great discussion!

@svishwakarma did you manage to make this work following the advice? Please let us know the solution! 

[svishwakarma · Accepted solution]

Solution :

Please try setting "1" in the "Device Pixel Ratio" column for the virtual browser you're using:
https://support.smartbear.com/testcomplete/docs/working-with/managing-projects/properties/open-apps/...