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

})

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

})

• javascript
• html
• typescript
• nuxt.js
• playwright

Share Improve this question Follow edited Jun 22, 2022 at 2:18 kissu 47k1616 gold badges9090 silver badges189189 bronze badges asked Jun 22, 2022 at 1:28 Gavin Teo JuenGavin Teo Juen 32022 gold badges88 silver badges2020 bronze badges 1

• There is no error it seems so it would be hard for anyone to help you out. would you mind try using trace and view or provide the trace ? You can enable it in your global config as details provided here - playwright.dev/docs/trace-viewer#recording-a-trace Keep it on instead of on-first-retry – Amol Chavan Commented Jun 22, 2022 at 3:46

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You can try force clicking the button. Setting force to true will bypass the actionability check.

 await page.locator('.v-btn').click({force: true});