Mobile Device Emulation | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Advanced Tricks and Techniques
Instructor: Artem Bondar
Lesson Summary
This lesson focuses on running tests on mobile emulators using Playwright, allowing you to test web applications on various devices like the iPhone and Android. Setting Up Mobile Tests To begin, a new test file named testMobile.spec.ts is created. The following steps are involved: Import the Playwright library. Use beforeEach to navigate to the application. Navigate to the form layout page and simplify the test code. Creating a Mobile Project To run tests on mobile devices: Create a new project named Mobile . Specify the test to run using test match with testMobile.spec.ts . Use a use block to select the desired device from the available options. Running and Improving Tests After running the test on an iPhone 13 Pro, issues may arise due to the mobile responsive view. To resolve this: Identify and click the menu icon to access the form layout. Use unique locators to ensure the menu displays correctly. Implement conditions to handle different test scenarios based on the project name. Universal Test Optimization To make tests adaptable for both mobile and desktop: Utilize test info.project.name to conditionally execute steps. Ensure the test runs successfully in both environments. In summary, creating a separate mobile project and using conditional logic allows for efficient testing across platforms. This approach enhances code reusability and simplifies the testing process.
Video Transcript
In this lesson, we will talk about how to run tests on mobile emulators. So in Playwright, you can run tests, for example, on the iPhone or different version of the Android devices. So you can see how the application under test work under different platforms. And you can test that way responsive view of your web application. So in this lesson, we will learn how to do that. Let's get into it. So for this demo, let me quickly set up a new test. And I will call it testMobile.spec.ts. And I'll take one of the previous tests, let's say this testInputFields. Copy it right here. Also, I will need PlaywrightLibraryImport right here. Okay, what else? I think I need the beforeEach to navigate to application. So navigate to application. I'll put it right inside of the test body. And I think we need this navigate to the form layouts page. I need this as well. And delete everything that is not needed. I delete this. Let me delete this. Let's keep it simple. Something like that. All right, so this is our test. We want to go to the home page, navigate to the form layout page, and then type something to the input field box. And if I run it as usual with the default project, it works just fine. All right, how to run the same test in the mobile device? Usually, you need to create a new project, because this is the most convenient way of handling this. So let's go to the project section and create a new project with a name Mobile. Then inside of the project, we need to specify which test we want to run, test match, and it will be testMobile.spec.ts. And in order to specify which device you want to use, we use a use block inside of that three dots, devices. This is array. And then when you click single quote, you have a big list of the devices offered by Visual Studio Code. So look at this. You have a Galaxy, you have BlackBerry, you have Microsoft Lumia, you have Google Pixel, iPad, iPhone, and so on. So let's say we want to run our test in iPhone 13 Pro, and I just select this device. And this is pretty much it. So let's try to run newly created testMobile.spec on the mobile device, and let's see how it's gonna work. So clicking here, selecting the mobile project, and running this test. All right, you can see that the view of the mobile device is open. So this is a responsive design, and it does not work. Because in the mobile responsive view, the menu is not displayed. In order to continue the test, we need to click on this menu, and then select form layout, and then you see right now test is passed. So we need to make some improvements to this particular test in order to work it on the mobile devices. Let's quit the test. So we need to make some improvements to work it on the mobile devices. Let's quickly make this. So I make right click, inspect, and we need to find out this particular icon need to be clicked in order to expand the menu. And we are looking for certain unique locators. So probably this one, sidebar toggle class, something that would work. And we need to add it right here. Await page dot locator class side toggle dot click. All right, let's run this test one more time and see how it works after the change. All right, click was successful, but still the menu is displayed. After we clicked on that, we need to click on one more time to display page completely. Even despite that, Playwright was able to fill out this form, probably because it's partially visible over here. So it was able to access this element. But anyway, let's make this change real quick. So I need to add this step at the end after we click on the forms layout, and let's run this one more time. All right, and now it worked perfectly fine. So as you can see, running on different devices is very simple. You just go to the configuration file and set the device that you want to run. Alternatively, instead of devices, you can use a viewport. It also would work just fine. And for example, if you put the viewport of the iPhone, something like this, and run this test as well, this also will work. I run it one more time, and you see almost the viewport that we are looking for, but we also have a responsive design. Let me show you one more thing. I delete this, I'll keep my iPhone. Sometimes you would like to make your test more universal, because this test is very similar to other tests when we're navigating to the page. So you most likely would like to reuse the code of your test instead of copy pasting the test from one spec file to other spec file. If you don't have so many changes in your applications, and just a few elements here and there should be adjusted to be more adaptive for the mobile view or the desktop view, you can use a test info options and create a condition for your application based on that. For example, we can create a condition like this. If testinfo.project.name equals to mobile, then I want to run this test to click on toggle. Otherwise, this step simply will be skipped, and I can take this step and replace it right here as well. So right now we modify the test so it can equally be executed on both platforms, on the Chrome browser in the desktop view and in emulation on iPhone. So running the normal mode. This is a normal browser, you see it's working. And then running in emulation mode, mobile. And it's also working just fine. So this is the way how you can optimize the test if you want to use them on both platforms, mobile and desktop. So that's it, pretty simple. And let's quickly summarize. If you want to run your test on the mobile devices, a good advice will be to create an independent project related to the mobile test and put the test match if you want to keep the mobile test separately. Inside of the devices, you can select the device that you want to run based on name. Visual Studio Code will give you advice. And if you want to reuse your test and make them universal, be able to run them on both platforms, desktop and mobile, you can use a property of test info project name. And based on the project name, create conditions when to run certain steps using mobile and when desktop. All right, that's it, guys. And see you in the next lesson.