86 lines
3.1 KiB
TypeScript
86 lines
3.1 KiB
TypeScript
import { test, expect } from '@playwright/test';
|
|
|
|
test('debug typeahead', async ({ page }) => {
|
|
// Navigate to transactions page
|
|
await page.goto('/transaction2');
|
|
await page.waitForSelector('table tbody tr');
|
|
|
|
// Click edit
|
|
const editButton = page.locator('button[hx-get*="/transaction2/"][hx-get*="/edit"]').first();
|
|
await editButton.click();
|
|
|
|
await page.waitForSelector('#modal-holder[x-show="open"]', { state: 'visible' });
|
|
await page.click('button:has-text("Transaction Actions")');
|
|
await page.waitForSelector('text=Transaction Actions', { state: 'visible' });
|
|
await page.click('button:has-text("Manual")');
|
|
await page.waitForSelector('#account-grid-body');
|
|
|
|
// Switch to percentage mode
|
|
await page.locator('input[name="step-params[amount-mode]"][value="%"]').click();
|
|
await page.waitForResponse(response =>
|
|
response.url().includes('/toggle-amount-mode') && response.status() === 200
|
|
);
|
|
await page.waitForTimeout(200);
|
|
|
|
// Click New account
|
|
await page.click('text=New account');
|
|
await page.waitForTimeout(500);
|
|
|
|
// Find the typeahead
|
|
const row = page.locator('#account-grid-body tbody tr').nth(0);
|
|
const typeaheadContainer = row.locator('div.relative[x-data*="baseUrl"]').first();
|
|
const typeaheadTrigger = typeaheadContainer.locator('a[x-ref="input"]').first();
|
|
|
|
// Click to open dropdown
|
|
await typeaheadTrigger.click();
|
|
await page.waitForTimeout(500);
|
|
|
|
// Take a screenshot to see what's on screen
|
|
await page.screenshot({ path: '/tmp/typeahead-debug.png' });
|
|
|
|
// Find all tippy dropdowns
|
|
const tippies = page.locator('div[id^="tippy"]');
|
|
console.log('Number of tippy elements:', await tippies.count());
|
|
|
|
// Get HTML of first tippy
|
|
if (await tippies.count() > 0) {
|
|
const html = await tippies.first().innerHTML();
|
|
console.log('First tippy HTML:', html.substring(0, 1000));
|
|
}
|
|
|
|
// Try to find search input
|
|
const searchInputs = page.locator('input[type="text"]');
|
|
console.log('Number of text inputs:', await searchInputs.count());
|
|
|
|
// Find visible text inputs
|
|
for (let i = 0; i < Math.min(await searchInputs.count(), 10); i++) {
|
|
const input = searchInputs.nth(i);
|
|
const isVisible = await input.isVisible().catch(() => false);
|
|
console.log(`Input ${i}: visible=${isVisible}`);
|
|
}
|
|
|
|
// Type in the search input
|
|
const searchInput = page.locator('div[id^="tippy"] input[type="text"]').first();
|
|
await searchInput.fill('Test');
|
|
await page.waitForTimeout(1000);
|
|
|
|
// Take another screenshot
|
|
await page.screenshot({ path: '/tmp/typeahead-debug-2.png' });
|
|
|
|
// Check for dropdown options
|
|
const options = page.locator('div[id^="tippy"] .dropdown-options a');
|
|
console.log('Number of dropdown options:', await options.count());
|
|
|
|
// Get HTML of dropdown options
|
|
if (await options.count() > 0) {
|
|
for (let i = 0; i < Math.min(await options.count(), 3); i++) {
|
|
const html = await options.nth(i).innerHTML();
|
|
console.log(`Option ${i}:`, html);
|
|
}
|
|
}
|
|
|
|
// Also check if there are any li elements
|
|
const lis = page.locator('div[id^="tippy"] li');
|
|
console.log('Number of li elements:', await lis.count());
|
|
});
|