On this page, we will explain the procedure for creating and running a Web application on a local PC.
Table of Contents
- View the procedure in video form
- Creating test cases
- Specifying the browser
- Acquiring screen captures
- Creating test procedures
- Executing test cases
1. View the procedure in video form
We have prepared a video to show you the very simple steps for creating and running a test.
As shown in the video, with MagicPod, it is also possible to run test cases created on one browser on a different browser. In cases where, due to the browser, the HTML configuration is different or the appearance of the screen varies greatly, the test will fail.
2. Creating test cases
Figure 1 “Edit test case” button
First, create the test case. Then, click the “Edit test case” button in Figure 1, to move to the “Test case” edit page in Figure 2. On this page, we will create the detailed content of the test case.
Figure 2 “Test case” edit page
3. Specifying the browser
First, launch the browser and acquire the screen capture information, etc. To do this, it is necessary to specify the browser in the pop-up in Figure 3 and connect.
Figure 3 Specifying the browser
Here, we shall create this using Google Chrome.
4. Acquiring screen captures
After specifying the browser, click the button to “Connect” to the browser (Figure 4) at the top-right of the test case edit page.
Figure 4 Button to “Connect” to the browser
When connecting to the browser for the first time, the dialog box shown in Figure 5 is displayed, so enter the URL to connect to. The URL entered here is stored for each project, so the same URL will also open for the second and subsequent test cases.
Figure 5 Input URL
For Windows, a confirmation dialog box like that shown in Figure 6-1 will be displayed, so check the “Always allow app.magicpod.com to open links of this type in the associated app", and select “Open MagicPodDesktop.” If you enter a check here, this confirmation dialog box will not be displayed from the next time.
Figure 6-1 Confirmation dialog box (in case of Windows)
For Mac, the following kind of dialog box is displayed. Select “Open MagicPodDesktop” in the same way.
Figure 6-2 Confirmation dialog box (in case of Mac)
MagicPodDesktop will then launch, as shown in Figure 7. The first time, enter the e-mail address and password, and click “Authenticate”.
Figure 7 MagicPodDesktop
After some time has passed, a separate window from the test case edit window will be launched by MagicPodDesktop, and you will be taken to the URL you just input (Figure 8).
Figure 8 Image displayed on the default start page of the browser
Once the connection is made, you will be able to click the “Capture UI using Desktop App” button, Click this to acquire a screen capture. Once you click this button, the capture upload and scan will start, and a short amount of time, the test case Edit page in Figure 10 will be displayed.
Figure 10 Screen capture displayed on the test case Edit page
At this point, we have acquired the screen capture. 1The command to transition to the page for acquiring the capture will now be automatically generated on the left of the screen. This command can be added, edited, or deleted at a later date.
5. Creating test procedures
As we have uploaded, one capture, we can perform a simple test using just one screen.
There are two ways of creating the test procedure, depending on the type of procedure.
To add a procedure using screen elements (buttons, text fields, etc.), drag and drop the elements you wish to operate from the capture. Once the line is added, select a command such as click or text input, and enter the value as necessary.
Figure 11 Image of creating the test procedure by drag & drop
When adding commands that are not related to specific elements, click the “Add new row” button to display the list of commands, and select the required command. To run the search here, insert a command to press the Enter key.
Figure 12 Select the keyboard key input command
This completes this case.
Figure 13 Completed test case
Additionally, although the name of the element is automatically generated by AI, if the generated name is inappropriate, you can click the area of the screen capture to change the name (Figure 14).
Figure 14 Changing the element name
MagicPod, in addition to the element name, also holds the system information of the element, which is used to identify the elements during the test. See here for the detailed mechanism (this is an explanation of the mobile test, but in principle, this is the same for the Web application).
6. Running test cases
Once the test procedure is created, click the “Run” button (Figure 15) at the bottom of the test case edit page to run the test.
Figure 15 “Run” button
As shown in Figure 16, we can see that the browser is automatically operated. The test execution log is displayed in real time, on MagicPodDesktop for each step.
Figure 16 Image of test execution
If the test succeeds, “Success” is displayed for the Execution button, as shown in Figure 17.
Figure 17 Image of successful test
If you click the “Back” link here, on the test case edit page, and select the “Test runs” tab, and select the test result number, you can confirm "Screenshots", "Test run log", "Selenium log" and "Test run information" when running the tests (browser used, etc.), such as the test execution history (Figure 18) and a page with even more detailed results (from Figure 19).
Figure 18 Test execution history page
Figure 19 Test results detail page (Screenshots tab)
Figure 20 Test results detail page (Test run log tab)
Figure 21 Test results detail page (Selenium log tab)
Figure 22 Test results detail page (Test run information tab)