How to button clicked using playwright testing framework?

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') })

})

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});