playwright-ts-automationframework 1.0.2 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +32 -45
- package/lib/core/actions.core.d.ts +17 -0
- package/lib/core/actions.core.js +26 -0
- package/lib/core/configuration.core.js +3 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -10,38 +10,31 @@ Project Setup:
|
|
|
10
10
|
2. Open Terminal >> New Terminal
|
|
11
11
|
3. Type Command ‘npm init playwright’ and hit enter.
|
|
12
12
|
4. Enter all information in terminal asked in terminal and press enter such as language as Typescript going to use in this project, Test case folder folder.
|
|
13
|
-
5. Project structure will look like below.
|
|
14
|
-
|
|
15
|
-

|
|
16
13
|
|
|
17
|
-
|
|
14
|
+
5. Again Open terminal. In terminal type below command and hit enter button.
|
|
18
15
|
‘npm install playwright-ts-automationframework’.
|
|
19
16
|
It will download the playwright typescript framework library and save in node modules folder. Also you will see entry is added in package.json file.
|
|
20
|
-
|
|
21
|
-
a. npm install typescript
|
|
22
|
-
|
|
17
|
+
6. Install other necessary libraries using below commands in same way.
|
|
18
|
+
a. npm install typescript
|
|
19
|
+
7. After installation all the libraries name with version will get added in package.json file.
|
|
23
20
|
|
|
24
|
-

|
|
25
21
|
|
|
26
22
|
Page folder:
|
|
27
23
|
1. Create a folder with name ‘pages’ in the project level.
|
|
28
24
|
2. Create a file with name MethodBase.pom.ts and class name as MethodBase in page folder which extends the Assertion class from framework library.
|
|
29
25
|
3. Add constructor with parameter as page and pass this page instance to the parent class.
|
|
30
|
-
|
|
31
|
-

|
|
32
|
-
|
|
33
26
|
4. Now you can create each page class which extends MethodBase Class. This means methodBase class will be parent of each page class.
|
|
34
27
|
5. Create LoginPage.pom.ts class which extends methodBase class. Add constructor to it with page object.
|
|
35
|
-
|
|
36
|
-

|
|
37
|
-
|
|
38
28
|
6. Let us add some controls for login page and method to it. In this framework we write in the format of Object of WebControl which accepts first parameter as playwright locator and second parameter as control description. Let us try to automate one basic test case for OrangeHRM and try to create objects and method for it.
|
|
39
29
|
7. URL: https://opensource-demo.orangehrmlive.com/web/index.php/auth/login
|
|
40
30
|
|
|
41
31
|
|
|
42
32
|
usernameTxtbx = new WebControl(this.page.locator("xpath=//input[@name='username']"), "Username textbox");
|
|
33
|
+
|
|
43
34
|
passwordTxtbx = new WebControl(this.page.locator("xpath=//input[@name='password']"), "Password textbox");
|
|
35
|
+
|
|
44
36
|
loginBtn = new WebControl(this.page.locator("xpath=//button[@type='submit']"), "Login button");
|
|
37
|
+
|
|
45
38
|
dashboardBtn = new WebControl(this.page.locator("xpath=//span[text()='Dashboard']"), "Dashboard tab button");
|
|
46
39
|
|
|
47
40
|
|
|
@@ -49,7 +42,7 @@ Page folder:
|
|
|
49
42
|
|
|
50
43
|
|
|
51
44
|
|
|
52
|
-
async doLogin(username: string, password: string)
|
|
45
|
+
async doLogin(username: string, password: string)
|
|
53
46
|
{
|
|
54
47
|
await this.type(this.usernameTxtbx, username);
|
|
55
48
|
await this.type(this.passwordTxtbx, password);
|
|
@@ -63,37 +56,35 @@ async doLogin(username: string, password: string)
|
|
|
63
56
|
|
|
64
57
|
|
|
65
58
|
9. Code will look like below.
|
|
66
|
-
|
|
67
|
-

|
|
68
|
-
|
|
69
59
|
10. Let us create test file with name ‘login.spec.ts’ test cases in tests folder. We will create beforeEach and afterEach in which we will initialize browser, SetTCID and Execution Completed logging method.
|
|
70
60
|
11. We will Add Test cases and call the method from page objects and will send parameters from test cases.
|
|
71
61
|
12.
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
62
|
+
import { test } from '@playwright/test';
|
|
63
|
+
import { LoginPage } from '../pages/loginPage.pom';
|
|
64
|
+
import { BasePage } from 'playwright-ts-automationframework';
|
|
65
|
+
|
|
66
|
+
let loginPage: LoginPage;
|
|
67
|
+
|
|
68
|
+
test.beforeEach( async ({ page, baseURL }, testinfo) => {
|
|
69
|
+
loginPage = new LoginPage(page);
|
|
70
|
+
BasePage.setTestCaseID(testinfo);
|
|
71
|
+
await loginPage.initializeBrowser(baseURL);
|
|
72
|
+
})
|
|
73
|
+
|
|
74
|
+
test('Verify login with valid credentials', async ({ page }) => {
|
|
75
|
+
await loginPage.doLogin("Admin", "admin123");
|
|
76
|
+
await loginPage.verifyLoginSuccessful();
|
|
77
|
+
});
|
|
78
|
+
|
|
79
|
+
test.afterEach( async ({ page, baseURL }, testinfo) => {
|
|
80
|
+
BasePage.executionCompleted(testinfo);
|
|
81
|
+
})
|
|
82
|
+
|
|
93
83
|
|
|
94
84
|
12. Last Step we need to perform, we need to add two json files at project level
|
|
95
85
|
a. ExecutionSettings.json
|
|
96
86
|
Execution Settings will contain all the information related to the execution of application such as environment, emailRecivers, senderEmail, senderPassword.
|
|
87
|
+
|
|
97
88
|
{
|
|
98
89
|
"environment": "#{environment}#",
|
|
99
90
|
"emailRecievers": "#{emailRecievers}#",
|
|
@@ -105,6 +96,8 @@ Execution Settings will contain all the information related to the execution of
|
|
|
105
96
|
|
|
106
97
|
b. AppConfigurations.json
|
|
107
98
|
AppConfigurations.json file will contain all the configurations related to the QA, PROD or Staging. JSON file will look like below.
|
|
99
|
+
|
|
100
|
+
|
|
108
101
|
{
|
|
109
102
|
"QA":
|
|
110
103
|
{
|
|
@@ -142,13 +135,7 @@ AppConfigurations.json file will contain all the configurations related to the Q
|
|
|
142
135
|
|
|
143
136
|
|
|
144
137
|
13. Open to playwright.config.ts and navigate to use section. Set BaseURL and add headless flag as false in file.
|
|
145
|
-
|
|
146
|
-

|
|
147
|
-
|
|
148
138
|
14. Make sure you have installed below extension in your visual Studio code.
|
|
149
139
|
https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright
|
|
150
140
|
15. Navigate to Testing Tab in Left side tree. Expand login.spec.ts, select run button in front of test case.
|
|
151
|
-
|
|
152
|
-

|
|
153
|
-
|
|
154
141
|
16. This will execute the test case and result will be appeared there.
|
|
@@ -247,6 +247,17 @@ export declare class Actions extends BasePage {
|
|
|
247
247
|
* let alertMsg = getAlertDialogMessage();
|
|
248
248
|
*/
|
|
249
249
|
getAlertDialogMessage(): Promise<Page>;
|
|
250
|
+
/**
|
|
251
|
+
* Return all elements for given search criteria.
|
|
252
|
+
*
|
|
253
|
+
* @param WebControl Control on which user want to click.
|
|
254
|
+
*
|
|
255
|
+
* Example:
|
|
256
|
+
*
|
|
257
|
+
* dateColumn = new WebControl(this.page.locator('#date'), 'Date Column values');
|
|
258
|
+
*
|
|
259
|
+
* findAll(dateColumn);
|
|
260
|
+
*/
|
|
250
261
|
findAll(control: WebControl): Promise<import("playwright-core").Locator[]>;
|
|
251
262
|
/**
|
|
252
263
|
* Read the web URL
|
|
@@ -320,4 +331,10 @@ export declare class Actions extends BasePage {
|
|
|
320
331
|
* sleep(10);
|
|
321
332
|
*/
|
|
322
333
|
sleep(milliseconds?: number): Promise<unknown>;
|
|
334
|
+
/**
|
|
335
|
+
* Close the browser instance
|
|
336
|
+
*
|
|
337
|
+
* closeBrowser();
|
|
338
|
+
*/
|
|
339
|
+
closeBrowser(): Promise<void>;
|
|
323
340
|
}
|
package/lib/core/actions.core.js
CHANGED
|
@@ -619,6 +619,17 @@ var Actions = /** @class */ (function (_super) {
|
|
|
619
619
|
});
|
|
620
620
|
});
|
|
621
621
|
};
|
|
622
|
+
/**
|
|
623
|
+
* Return all elements for given search criteria.
|
|
624
|
+
*
|
|
625
|
+
* @param WebControl Control on which user want to click.
|
|
626
|
+
*
|
|
627
|
+
* Example:
|
|
628
|
+
*
|
|
629
|
+
* dateColumn = new WebControl(this.page.locator('#date'), 'Date Column values');
|
|
630
|
+
*
|
|
631
|
+
* findAll(dateColumn);
|
|
632
|
+
*/
|
|
622
633
|
Actions.prototype.findAll = function (control) {
|
|
623
634
|
return __awaiter(this, void 0, void 0, function () {
|
|
624
635
|
var allElements;
|
|
@@ -824,6 +835,21 @@ var Actions = /** @class */ (function (_super) {
|
|
|
824
835
|
});
|
|
825
836
|
});
|
|
826
837
|
};
|
|
838
|
+
/**
|
|
839
|
+
* Close the browser instance
|
|
840
|
+
*
|
|
841
|
+
* closeBrowser();
|
|
842
|
+
*/
|
|
843
|
+
Actions.prototype.closeBrowser = function () {
|
|
844
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
845
|
+
return __generator(this, function (_a) {
|
|
846
|
+
switch (_a.label) {
|
|
847
|
+
case 0: return [4 /*yield*/, this.page.close()];
|
|
848
|
+
case 1: return [2 /*return*/, _a.sent()];
|
|
849
|
+
}
|
|
850
|
+
});
|
|
851
|
+
});
|
|
852
|
+
};
|
|
827
853
|
return Actions;
|
|
828
854
|
}(basePage_core_1.BasePage));
|
|
829
855
|
exports.Actions = Actions;
|
|
@@ -52,13 +52,13 @@ var Configuration = /** @class */ (function () {
|
|
|
52
52
|
});
|
|
53
53
|
Object.defineProperty(Configuration, "configurationData", {
|
|
54
54
|
get: function () {
|
|
55
|
-
if (Configuration.environment.toUpperCase()
|
|
55
|
+
if (Configuration.environment.toUpperCase().includes("QA")) {
|
|
56
56
|
return appConfigurations.QA;
|
|
57
57
|
}
|
|
58
|
-
else if (Configuration.environment.toUpperCase()
|
|
58
|
+
else if (Configuration.environment.toUpperCase().includes("STAG")) {
|
|
59
59
|
return appConfigurations.STAGE;
|
|
60
60
|
}
|
|
61
|
-
else if (Configuration.environment.toUpperCase()
|
|
61
|
+
else if (Configuration.environment.toUpperCase().includes("PROD")) {
|
|
62
62
|
return appConfigurations.PROD;
|
|
63
63
|
}
|
|
64
64
|
else {
|