How to button clicked using playwright testing framework?

Question

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

Button Screenshot

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

})

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
– Amol Chavan, Commented Jun 22, 2022 at 3:46

Alapan Das · Accepted Answer · 2022-06-22 04:51:37Z

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

answered Jun 22, 2022 at 4:51

Alapan Das

18.3k5 gold badges38 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to button clicked using playwright testing framework?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related