Skip to content

Commit 28b8cfa

Browse files
nomadbitcoinnomadbitcoin
committed
playwright added
1 parent 00c94a7 commit 28b8cfa

File tree

5 files changed

+248
-0
lines changed

5 files changed

+248
-0
lines changed

‎quick-starts/react-quick-start/.gitignore‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,3 +23,11 @@ dist-ssr
2323
*.njsproj
2424
*.sln
2525
*.sw?
26+
27+
# Test and session data
28+
tests/session-data/
29+
tests/browser-profile/
30+
tests/session-state.json
31+
test-results/
32+
playwright-report/
33+
playwright/.cache/

‎quick-starts/react-quick-start/playwright.config.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { defineConfig } from '@playwright/test';
2+
import path from 'path';
3+
import { fileURLToPath } from 'url';
4+
5+
const __dirname = path.dirname(fileURLToPath(import.meta.url));
6+
7+
export default defineConfig({
8+
testDir: './tests',
9+
timeout: 30000,
10+
fullyParallel: false,
11+
forbidOnly: !!process.env.CI,
12+
retries: process.env.CI ? 2 : 0,
13+
workers: 1,
14+
reporter: 'html',
15+
16+
use: {
17+
headless: false,
18+
viewport: { width: 1280, height: 720 },
19+
actionTimeout: 10000,
20+
trace: 'retain-on-failure',
21+
screenshot: 'only-on-failure'
22+
},
23+
24+
projects: [
25+
{
26+
name: 'chromium',
27+
use: {
28+
...{ channel: 'chrome' },
29+
// Use persistent context for session storage
30+
storageState: path.join(__dirname, 'tests/session-state.json')
31+
},
32+
}
33+
],
34+
35+
webServer: {
36+
command: 'npm run dev',
37+
port: 5174,
38+
reuseExistingServer: !process.env.CI,
39+
}
40+
});

‎quick-starts/react-quick-start/tests/basic-test.js‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import { test, expect } from '@playwright/test';
2+
import path from 'path';
3+
import { fileURLToPath } from 'url';
4+
5+
const __dirname = path.dirname(fileURLToPath(import.meta.url));
6+
7+
test.describe('Web3Auth Asset Hub Tests', () => {
8+
test.beforeEach(async ({ context, page }) => {
9+
// Load the stored session if it exists
10+
const sessionPath = path.join(__dirname, 'session-data');
11+
12+
console.log('🔄 Loading session from:', sessionPath);
13+
14+
// Navigate to the app
15+
await page.goto('http://localhost:5174');
16+
await page.waitForLoadState('networkidle');
17+
});
18+
19+
test('should load the Web3Auth application', async ({ page }) => {
20+
// Check if the main title is visible
21+
await expect(page.locator('h1')).toContainText('Web3Auth');
22+
23+
// Check if login button exists (when not logged in)
24+
const loginButton = page.locator('button', { hasText: 'Login' });
25+
const logoutButton = page.locator('button', { hasText: 'Log Out' });
26+
27+
// Should have either login or logout button
28+
const hasLogin = await loginButton.isVisible().catch(() => false);
29+
const hasLogout = await logoutButton.isVisible().catch(() => false);
30+
31+
expect(hasLogin || hasLogout).toBe(true);
32+
33+
console.log('✅ Application loaded successfully');
34+
});
35+
36+
test('should show Asset Hub networks in switch chain component', async ({ page }) => {
37+
// Look for the Switch Network section
38+
const switchChainSection = page.locator('h2', { hasText: 'Switch Network' });
39+
await expect(switchChainSection).toBeVisible();
40+
41+
// Check for Asset Hub network buttons
42+
const passetHubButton = page.locator('button', { hasText: 'Passet Hub' });
43+
const kusamaAssetHubButton = page.locator('button', { hasText: 'Kusama Asset Hub' });
44+
const westendButton = page.locator('button', { hasText: 'Westend Network' });
45+
46+
// At least one Asset Hub network should be visible
47+
const hasAssetHubNetworks = await Promise.all([
48+
passetHubButton.isVisible().catch(() => false),
49+
kusamaAssetHubButton.isVisible().catch(() => false),
50+
westendButton.isVisible().catch(() => false)
51+
]);
52+
53+
expect(hasAssetHubNetworks.some(visible => visible)).toBe(true);
54+
55+
console.log('✅ Asset Hub networks are visible');
56+
});
57+
58+
test('should display wallet address when connected', async ({ page }) => {
59+
// Check if wallet address is displayed
60+
const walletAddressSection = page.locator('text=Wallet Address:');
61+
62+
if (await walletAddressSection.isVisible()) {
63+
// If connected, should show an address or "Not connected"
64+
const addressText = await page.locator('text=Wallet Address:').textContent();
65+
expect(addressText).toBeTruthy();
66+
console.log('✅ Wallet address section found:', addressText);
67+
} else {
68+
console.log('ℹ️ Not connected - wallet address not shown');
69+
}
70+
});
71+
});
72+
73+
// Export test configuration
74+
export default {
75+
testDir: './tests',
76+
timeout: 30000,
77+
use: {
78+
headless: false,
79+
viewport: { width: 1280, height: 720 },
80+
}
81+
};

‎quick-starts/react-quick-start/tests/browser-session.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { chromium } from 'playwright';
2+
import path from 'path';
3+
import { fileURLToPath } from 'url';
4+
5+
const __dirname = path.dirname(fileURLToPath(import.meta.url));
6+
7+
async function openBrowserWithSession() {
8+
// Launch browser with a specific user data directory for persistence
9+
const userDataDir = path.join(__dirname, 'session-data');
10+
11+
const browser = await chromium.launchPersistentContext(userDataDir, {
12+
headless: false,
13+
args: [
14+
'--start-maximized',
15+
'--disable-web-security',
16+
'--disable-features=VizDisplayCompositor'
17+
],
18+
viewport: { width: 1280, height: 720 }
19+
});
20+
21+
console.log('🚀 Browser opened with persistent session');
22+
console.log('📂 Session data will be stored in:', userDataDir);
23+
24+
// Get the default page
25+
const page = browser.pages()[0] || await browser.newPage();
26+
27+
// Navigate to your app
28+
await page.goto('http://localhost:5173');
29+
30+
console.log('✅ Navigated to Web3Auth app');
31+
console.log('🔗 URL: http://localhost:5173');
32+
console.log('');
33+
console.log('You can now:');
34+
console.log('• Login with Web3Auth');
35+
console.log('• Test Asset Hub networks');
36+
console.log('• All session data will be automatically saved');
37+
console.log('');
38+
console.log('Close the browser when done - session will persist for next time');
39+
40+
// Keep the process alive
41+
await new Promise(() => {});
42+
}
43+
44+
openBrowserWithSession().catch(console.error);

‎quick-starts/react-quick-start/tests/session-setup.js‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import { chromium } from 'playwright';
2+
import path from 'path';
3+
import { fileURLToPath } from 'url';
4+
5+
const __dirname = path.dirname(fileURLToPath(import.meta.url));
6+
7+
async function setupBrowserSession() {
8+
console.log('🚀 Launching Playwright browser...');
9+
10+
// Create persistent context (like a regular browser profile)
11+
const userDataDir = path.join(__dirname, 'browser-profile');
12+
13+
const context = await chromium.launchPersistentContext(userDataDir, {
14+
headless: false,
15+
args: ['--start-maximized'],
16+
slowMo: 100, // Add slight delay for better visibility
17+
viewport: { width: 1280, height: 720 },
18+
// Enable geolocation if needed
19+
geolocation: { latitude: 37.7749, longitude: -122.4194 },
20+
permissions: ['geolocation']
21+
});
22+
23+
// Get the first page (persistent context creates one automatically)
24+
const pages = context.pages();
25+
const page = pages.length > 0 ? pages[0] : await context.newPage();
26+
27+
console.log('📱 Navigating to Web3Auth React app...');
28+
29+
// Navigate to the local development server
30+
await page.goto('http://localhost:5174');
31+
32+
// Wait for the page to load
33+
await page.waitForLoadState('networkidle');
34+
35+
console.log('✅ Browser opened successfully!');
36+
console.log('🔗 Application URL: http://localhost:5174');
37+
console.log('');
38+
console.log('📋 You can now:');
39+
console.log(' • Test Web3Auth login with your Asset Hub networks');
40+
console.log(' • Interact with the application manually');
41+
console.log(' • Switch between Passet Hub, Kusama Asset Hub, and Westend');
42+
console.log(' • Test send transactions and balance checks');
43+
console.log('');
44+
console.log('💾 When ready, the session will be saved for automated testing');
45+
46+
// Keep the browser open for manual interaction
47+
// You can interact with the app, login, etc.
48+
console.log('⏳ Browser will stay open for manual testing...');
49+
console.log(' Press Ctrl+C to close and save session state');
50+
51+
// Setup graceful shutdown
52+
process.on('SIGINT', async () => {
53+
console.log('\n💾 Saving browser session state...');
54+
55+
// Save the storage state (including cookies, localStorage, etc.)
56+
const sessionPath = path.join(__dirname, 'session-state.json');
57+
await context.storageState({ path: sessionPath });
58+
59+
console.log(`✅ Session saved to: ${sessionPath}`);
60+
console.log(`📁 Profile data saved to: ${userDataDir}`);
61+
console.log('🔄 This session can be reused in future tests');
62+
63+
await context.close();
64+
process.exit(0);
65+
});
66+
67+
// Keep the script running
68+
await new Promise(() => {});
69+
}
70+
71+
// Run the setup
72+
setupBrowserSession().catch(error => {
73+
console.error('❌ Error setting up browser session:', error);
74+
process.exit(1);
75+
});

0 commit comments

Comments
 (0)