Playwright TypeScript Automation Framework
- Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API. Playwright is built to enable cross-browser web automation that is ever-green, capable, reliable and fast. Headless execution is supported for all browsers on all platforms.
- As Playwright is written by the creators of the Puppeteer, you would find a lot of similarities between them.
- Playwright has its own test runner for end-to-end tests, we call it Playwright Test.
- Cross-browser. Playwright supports all modern rendering engines including Chromium, WebKit, and Firefox.
- Cross-platform. Test on Windows, Linux, and macOS, locally or on CI, headless or headed.
- Cross-language. Use the Playwright API in TypeScript, JavaScript, Python, .NET, Java. The core framework is implemented using TypeScript.
- Playwright development is sponsored by Microsoft.
GitHub Documentation API reference Changelog
This is an automation framework using Playwright written in TypeScript.
- Visual Code
- NodeJS version > 14 (Node.js 14 is no longer supported since it reached its end-of-life on April 30, 2023.)
- Playwright 1.32.3
This is the quick and easy getting started assuming you already have git, Visual Code and NodeJS installed.
- Launch Visual Code
- File -> Open Folder OR ctrl+K ctrl+O
- Select project root folder
- Install all required packages for project defined in the package.json file: Playwright, etc
Open Terminal window in Visual Code (ctrl + `) then execute command:
npm install
Or go to project root folder then open CMD windows and execute command:
npm install
- Install Playwright Browsers
Open Terminal window in Visual Code (ctrl + `) then execute command:
npx playwright install
Or go to project root folder then open CMD windows and execute command:
npx playwright install
Debug
ENV=local npx playwright test --debug
## Run Tests
### Run tests on Chrome
please refer to script path in package.json
npm run test:local
npm run test:dev
run with trace on
npm run test:local-trace
npm run test:dev-trace
run smoke test on local machine
npm run smoke-test
run in preprod and mainnet
npm run test:mainnet
npm run test:preprod
first we need to have a script to :
- run the automation framework
- generate Allure report
- store the Allure report in a history file
#!/bin/bash
# Check the Docker build command and run the corresponding script
if [[ $1 == "yaci" ]]; then
#sleep for 1 min for the build to finish
sleep 1m
# Set the working directory to the script repository
cd /app/store-data-verification
# navigate to the test folder
cd /playwright-api-testing
# Run the script then serve allure report
npx playwright test --reporter=allure-playwright
allure generate allure-results --clean -o playwright-api-testing/allure-report && allure serve playwright-api-testing/allure-results
# Store allure reports somewhere
cp -r allure-report/history/ allure-results
# Check the Docker build command and run the corresponding script
elif [[ $1 == "ls" ]]; then
#sleep for 1 min for the build to finish
sleep 1m
# Set the working directory to the script repository
cd /app/cf-ls-sync-data-verification
# navigate to the test folder
cd /playwright-database-testing
# Run the script then serve allure report
npx playwright test --reporter=allure-playwright
allure generate allure-results --clean -o playwright-database-testing/allure-report && allure serve playwright-database-testing/allure-results
# Store allure reports somewhere
cp -r allure-report/history/ allure-results
else
echo "Invalid Docker build command. Please specify either 'yaci' or 'ls'."
exit 1
fi
then we need a docker file to build and deploy the script
# Use a base image with Node.js and SSH client installed
FROM node:14
# Install SSH client and cron
RUN apt-get update && apt-get install -y openssh-client cron
# Set the working directory inside the container
WORKDIR /app
# Copy the SSH private key to the container
COPY id_rsa /root/.ssh/id_rsa
# Set the permissions for the SSH private key
RUN chmod 600 /root/.ssh/id_rsa
# Disable strict host key checking for SSH
RUN echo "StrictHostKeyChecking no" >> /etc/ssh/ssh_config
# Clone the script repository using SSH
RUN ssh-keyscan github.com >> /root/.ssh/known_hosts && \
git clone [email protected]:cardano-foundation/cf-ls-sync-data-verification.git
# Set the working directory to the cloned repository
WORKDIR /app/cf-ls-sync-data-verification
# Install dependencies using npm ci
RUN npm cache clean --force
RUN npm install --only=prod
# Rewrite the .env.server file with new command
RUN echo "LEDGER_SYNC_USERNAME = (PROVIDED_INFORMATION)" > .env.server
RUN echo "lEDGER_SYNC_PASSWORD = (PROVIDED_INFORMATION)" > .env.server
RUN echo "DB_CONN_STRING = (PROVIDED_INFORMATION)" > .env.server
RUN echo "KOIOS_API_URL = (PROVIDED_INFORMATION)" > .env.server
RUN echo "POSTGRES_DB = (PROVIDED_INFORMATION)" > .env.server
RUN echo "SCHEMA = (PROVIDED_INFORMATION)" > .env.server
# Copy the shell script to the container
COPY run-script.sh /usr/local/bin/run-script.sh
# Give execution rights to the script
RUN chmod +x /usr/local/bin/run-script.sh
# Add cron job to run the script every 1 hour
RUN echo "0 * * * * /usr/local/bin/run-script.sh >> /var/log/cron.log 2>&1" | crontab -
# Run cron in the foreground
CMD ["cron", "-f"]
# Add cron job to run the script at midnight UTC+0
RUN echo "0 0 * * * /usr/local/bin/run-script.sh >> /var/log/cron.log 2>&1" | crontab -
# Run cron in the foreground
CMD ["cron", "-f"]
first we need to have a script to :
- run the automation framework
- generate Playwright report
- store the playwright report somewhere
- then we use this command to export the report
- WARNING : because Allure report is a web-server host report and it got multi layer so it cannot be export in a PDF file
npm run export-pdf
first we need to create a slack-notify helper :
import axios from "axios";
const SLACK_WEBHOOK_URL = "YOU_DESIRE_WEBHOOK_URL";
export const sendSlackNotification = async (message: string) => {
try {
await axios.post(SLACK_WEBHOOK_URL, {
text: message,
});
console.log("Notification sent to Slack successfully");
} catch (error) {
console.error("Error sending notification to Slack:", error);
}
};
then we import it to your test and make it to run after a test have run and that test is failed :
// This will run after each test
test.afterEach(async ({}, testInfo) => {
if (testInfo.status === "failed") {
await sendSlackNotification(`Test failed: ${testInfo.title}`);
}
});