Currently , i am doing an end to end testing in my nuxt project. I want to test the frontend of my project to ensure the UI is presentable and clickable. However , I am facing a problem for my button. It felt like button is not clicked. I am pretty sure the css selector for my button is correctly defined as shown in here
The screenshot shows that the button is hovered over or partially clicked. Is there any way to solve this issue ?
page.spec.ts
import { resolve, join } from 'path' import { test, expect } from '@playwright/test' const ROOT_PATH = resolve(__dirname, '..', 'screenshots') test('job board test', async ({ page, baseURL }) => { await page.goto(baseURL + '/') // <-- Nuxt app is running and route '/' is showing. const html = await page.innerHTML('body') console.log(html) await expect(page.locator('h2').locator('text= meow')).toBeVisible() await page.fill('text=User name', 'jeff'); await page.fill('text= Password', 'jeff'); await page.locator('.v-btn').click(); // button clicked // Step 1 - Is Homepage working await page.screenshot({ path: join(ROOT_PATH, 'detail.png') }) })
Advertisement
Answer
You can try force clicking the button. Setting force
to true
will bypass the actionability check.
await page.locator('.v-btn').click({force: true});