Ensuring the reliability of your application’s login system is crucial for user trust and security. By integrating Playwright with Mailinator, you can automate the testing of login flows that involve One-Time Passwords (OTPs) sent via email or SMS.
Why Automate Login Testing?
Automated testing of login functionalities helps in:
- Validating that only authorized users can access restricted areas.
- Ensuring OTPs are correctly delivered and processed.
- Reducing manual testing efforts and increasing test coverage.
Benefits of Using Playwright with Mailinator
Combining Playwright’s end-to-end testing capabilities with Mailinator’s email and SMS testing features offers:
- Cross-Browser Testing: Playwright supports Chromium, Firefox, and WebKit, ensuring consistent behavior across browsers.
- Email and SMS Workflow Testing: Mailinator allows you to test email and SMS workflows like 2FA verifications, sign-ups, and password resets.
- API Access: Mailinator provides APIs to fetch emails and SMS messages, facilitating seamless integration with automated tests.
- Private Domains and Routing Rules: With Mailinator’s subscription plans, you can use private domains and set up routing rules for more controlled testing environments.
Setting Up a Playwright Project with Mailinator
Initialize a Playwright Project:
npm init playwright@latest
Install Required Packages:
npm install axios
- Configure Mailinator API Access:
Obtain your Mailinator API token from your Team Settings page and set up the base URL for API requests.
Example: Testing Email-Based OTP Login
const { test, expect } = require(‘@playwright/test’);
const axios = require(‘axios’);
test(‘Login using OTP code via email’, async ({ page }) => {
// Generate a unique inbox name
const inbox = `testuser_${Date.now()}`;
const emailAddress = `${inbox}@your-private-domain.mailinator.com`;
// Navigate to the login page and initiate login
await page.goto(‘https://yourapp.com/login’);
await page.fill(‘#email’, emailAddress);
await page.click(‘button[type=”submit”]’);
// Wait for the OTP email to arrive
const apiToken = ‘YOUR_MAILINATOR_API_TOKEN’;
const inboxResponse = await axios.get(`https://api.mailinator.com/api/v2/domains/private/inboxes/${inbox}`, {
headers: { ‘Authorization’: apiToken }
});
const messages = inboxResponse.data.msgs;
const otpEmail = messages.find(msg => msg.subject.includes(‘Your OTP Code’));
// Fetch the full message content
const messageResponse = await axios.get(`https://api.mailinator.com/api/v2/domains/private/messages/${otpEmail.id}`, {
headers: { ‘Authorization’: apiToken }
});
const otpCodeMatch = messageResponse.data.parts[0].body.match(/\d{6}/);
const otpCode = otpCodeMatch ? otpCodeMatch[0] : null;
// Enter the OTP and complete login
await page.fill(‘#otp’, otpCode);
await page.click(‘button[type=”submit”]’);
// Verify successful login
await expect(page).toHaveURL(‘https://yourapp.com/dashboard’);
});
Note: Replace your-private-domain.mailinator.com with your actual private domain provided by Mailinator.
Example: Testing SMS-Based OTP Login
const { test, expect } = require(‘@playwright/test’);
const axios = require(‘axios’);
test(‘Login using OTP code via SMS’, async ({ page }) => {
const phoneNumber = ‘15555555555’; // Use a Mailinator test phone number
// Navigate to the login page and initiate login
await page.goto(‘https://yourapp.com/login’);
await page.fill(‘#phone’, phoneNumber);
await page.click(‘button[type=”submit”]’);
// Wait for the OTP SMS to arrive
const apiToken = ‘YOUR_MAILINATOR_API_TOKEN’;
const smsResponse = await axios.get(`https://api.mailinator.com/api/v2/domains/private/inboxes/${phoneNumber}`, {
headers: { ‘Authorization’: apiToken }
});
const messages = smsResponse.data.msgs;
const otpMessage = messages.find(msg => msg.subject.includes(‘Your OTP Code’));
// Fetch the full message content
const messageResponse = await axios.get(`https://api.mailinator.com/api/v2/domains/private/messages/${otpMessage.id}`, {
headers: { ‘Authorization’: apiToken }
});
const otpCodeMatch = messageResponse.data.parts[0].body.match(/\d{6}/);
const otpCode = otpCodeMatch ? otpCodeMatch[0] : null;
// Enter the OTP and complete login
await page.fill(‘#otp’, otpCode);
await page.click(‘button[type=”submit”]’);
// Verify successful login
await expect(page).toHaveURL(‘https://yourapp.com/dashboard’);
});
Note: Ensure that the phone number used is associated with your Mailinator private domain and is configured to receive SMS messages.
Additional Tips
- Use Private Domains: To ensure delivery, you’ll need a private domain. We offer free Verified Pro subscriptions for individuals. These plans come with low limits. For Business level testing, you’ll need a paid subscription. You can begin with a Free Trial.
- Set Up Routing Rules: Define routing rules to manage incoming messages effectively.
- Monitor API Usage: Keep an eye on your API usage to stay within plan limits.
By integrating Playwright with Mailinator, you can efficiently automate and validate your application’s login processes involving OTPs, enhancing both security and user experience.