Как правильно подойти к вопросу: стабильность Fixed панелей в Playwright тестах?
Сейчас ситуация такая: есть проблема с функционалом fixed-панели с экшенами. Выглядит она в своем летучем виде как на скрине
С ней есть 2 проблемы:
Сейчас ситуация такая: 1) в —headed режиме запуска тестов её не видно визуально, при этом playwright её экспектит и кликает
Сейчас ситуация такая: 2) Иногда он почему-то считает кнопку не кликабельной. Но после неудачного клика, когда дальше по коду у него должна была появится модалка со следующими полями, он не падает, не ругается, а просто как будто бы виснет. Сначала грешил на конкретную кнопку, но в среднем каждая из этой панели может падать. Просто у них по статистике разная стабильность. Честно говоря, вообще 0 идей. Вьюпорт менять проверял, не решило ни одной проблемы. Использовал вот такую функцию для анализа
export async function isElementClickable( element: Locator | Promise<Locator | null> | null, timeout = 5000 ): Promise<boolean> { try { const resolved = await element; if (!resolved) { console.log('Element is not resolved'); return false; } await resolved.waitFor({ state: "visible", timeout }); if (!(await resolved.isEnabled())) { console.log('Element is not enabled'); return false; } const className = await resolved.getAttribute("class"); if (className) { const lowered = className.toLowerCase(); if ( lowered.includes("disabled") ) { console.log('Element is disabled'); return false; } } const box = await resolved.boundingBox(); if (!box) { console.log('Element is not visible'); return false; } await resolved.hover({ timeout }); console.log("Element is clickable"); return true; } catch { console.log("Element is not clickable"); return false; } }По вводным: вываливается именно в Element is not clickable
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Fixed-панели в Playwright-тестах часто дают нестабильность из-за перекрытия элементов, анимаций, sticky/fixed header, разной высоты viewport и автоскролла Playwright. Если тест кликает по кнопке, а сверху её перекрывает fixed-панель, Playwright честно считает элемент не кликабельным или кликает не туда.
Первое правило: задайте стабильный viewport для тестов и не полагайтесь на случайный размер окна:
test.use({ viewport: { width: 1366, height: 768 } });test.use({ viewport: { width: 1366, height: 768 } });
Перед кликом проверяйте, что элемент видим и не перекрыт. Иногда помогает
scrollIntoViewIfNeeded(), но если fixed header перекрывает верх страницы, лучше скроллить с отступом или кликать по элементу после явного ожидания layout.const button = page.getByRole('button', { name: 'Сохранить' }); await button.scrollIntoViewIfNeeded(); await expect(button).toBeVisible(); await button.click();const button = page.getByRole('button', { name: 'Сохранить' }); await button.scrollIntoViewIfNeeded(); await expect(button).toBeVisible(); await button.click();
Если проблема в анимации, отключите анимации в тестовом окружении через CSS:
*, *::before, *::after { transition: none !important; animation: none !important; }
Можно добавить этот CSS в тестах через
page.addStyleTag. Но если fixed-панель является частью логики интерфейса, не скрывайте её полностью: тест должен учитывать реальный UX.Также используйте semantic locators вместо координат и CSS-классов. Координатные клики ломаются первыми при изменении sticky/fixed элементов.
Итог: фиксируйте viewport, отключайте лишние анимации, используйте role/text locators, проверяйте видимость и перекрытие. Если fixed header стабильно мешает, добавьте в приложение scroll-margin-top для якорных/целевых элементов или адаптируйте скролл в тесте.