# Test Automation Framework
This Playwright Test Automation Framework provides a standardized setup for implementing automated tests in different projects and team across LucaNet using Playwright. It offers a structured approach with a Page Object Model (POM) at its core, allowing for easy maintenance and readability of tests.
## Installation
To install the framework in your project, use npm:
```bash
npm install test-automation-framework
```
## Usage
### Extending the BasePage
The `BasePage` class is the foundation for creating page-specific classes. Extend `BasePage` for each page in your application, defining the selectors and methods relevant to that page.
#### Example: SearchPage
```typescript
import { Page } from 'playwright';
import { BasePage } from 'playwright-ts';
export class SearchPage extends BasePage {
private searchFieldSelector: string;
constructor(page: Page) {
super(page, '/search');
this.searchFieldSelector = '#searchbox_input';
}
async search(searchKeyword: string): Promise<void> {
await this.page.fill(this.searchFieldSelector, searchKeyword);
await this.page.keyboard.press('Enter');
}
}
```
#### Example: ResultsPage
```typescript
import { Page } from 'playwright';
import { BasePage } from 'playwright-ts';
export class ResultsPage extends BasePage {
private resultsSelector: string;
constructor(page: Page) {
super(page, '/results');
this.resultsSelector = '#results';
}
getDuckBar(): Locator {
return this.page.locator(this.duckBarSelector);
}
}
```
### Using BasePageProvider
`BasePageProvider` is a utility class designed to simplify the management and usage of multiple page objects in your tests. It centralizes the creation and initialization of page objects, allowing you to access them easily within your test cases.
#### Example `BasePageProvider`:
```typescript
import { Browser, Page } from 'playwright';
import { BasePageProvider } from 'playwright-ts';
import { SearchPage } from './SearchPage';
import { ResultsPage } from './ResultsPage';
export class PageProvider extends BasePageProvider {
constructor(browser: Browser, page: Page) {
super(browser, page);
this.registerPageObject('search', SearchPage);
this.registerPageObject('results', ResultsPage);
}
getSearchPage(): SearchPage {
return this.getPageObject<SearchPage>('search');
}
getResultsPage(): ResultsPage {
return this.getPageObject<ResultsPage>('results');
}
}
```
#### Example Test Using `BasePageProvider`:
```typescript
import { test, expect } from '@playwright/test';
import { PageProvider } from '../src/pages/PageProvider';
test.describe('Search', () => {
let provider: PageProvider;
test.beforeEach(async ({ browser, page }) => {
provider = new PageProvider(browser, page);
});
test('Should search for \'Potato\' and see relevant results', async () => {
const searchPage = provider.getSearchPage();
const resultsPage = provider.getResultsPage();
await searchPage.navigateToPage();
await searchPage.search('Potato');
await expect(ResultsPage.getDuckBar()).toBeVisible()
});
});
```
## Updating and Publishing Changes to the Package
### Making Enhancements and Bug Fixes
If you’re looking to contribute by updating the package or fixing bugs, here’s a step-by-step guide to ensure a smooth process:
1. Clone the Repository:
Start by cloning the GitHub repository to your local machine.
2. Create a New Branch:
It’s good practice to make changes in a new branch. This keeps the main branch stable. Create a new branch with:
```bash
git checkout -b feature/your-new-feature
```
3. Make Your Changes:
With the new branch checked out, implement your changes, enhancements, or bug fixes.
4. Test Your Changes:
Before pushing your changes, ensure they are thoroughly tested. This might include writing new tests or updating existing ones to reflect your changes.
5. Commit and Push Your Changes:
Once you’re satisfied with your changes and all tests pass, commit them and push the branch to GitHub.
```bash
git add .
git commit -m "Describe your changes here"
git push origin feature/your-new-feature
```
### Publishing Your Changes
After your changes have been reviewed and merged into the main branch, they’re ready to be published to NPM.
1. Update the Package Version:
In package.json, update the version number. Follow semantic versioning (major.minor.patch) based on the nature of your changes.
2. Build the Package:
Run the build script to compile the TypeScript code.
```bash
npm run build
```
3. Publish to NPM:
Finally, publish the updated package to NPM. This step usually requires appropriate permissions, so coordinate with the package maintainers.
```bash
npm publish
```
Note: Ensure you have the latest version of the repository and are coordinated with other contributors to avoid conflicts or overlapping updates.