để làm việc với radio buttons trước tiên các bạn cài cài đặt ứng dụng trên local để thực hành link mình để ở dưới nhé
https://viblo.asia/p/bai-7-cai-dat-ung-dung-local-de-thuc-hanh-playwright-BQyJKGlRJMe
Hôm nay mình sẽ giới thiệu cách làm việc với radio button
-
thao tác đầu tiên là tích vào radio button
-
sau đó kiểm tra trạng thái của radio button vừa tích
Tạo file test mới test => sau đó các bạn tạo test case check radio buttons như ở dưới nhé
test('check radio buttons', async({page})=> { // vào mở trang => và đi đến page Form Layouts await page.goto('http://localhost:4200/') await page.getByText('Forms').click() await page.getByText('Form Layouts').click() // thao tác với radio button const usingTheGrid = page.locator('nb-card', {hasText:'Using the Grid'}) //lưu lại local thẻ cha chưa radio button // tích vào radio button await usingTheGrid.getByRole('radio',{name: 'Option 1'}).check({force:true}) // hoặc có thể sử dụng await usingTheGrid.getByLabel('Option 1').check({force:true}) // kiểm tra radio button được tích chưa => nếu đã được tính trả về true , chưa trả về false const radioStatus = await usingTheGrid.getByRole('radio',{name: 'Option 1'}).isChecked() expect(radioStatus).toBeTruthy() // hoặc có thể dùng trực tiếp như sau => await expect(usingTheGrid.getByRole('radio', {name: 'Option 1'})).toBeChecked() // Check radio Option 2 await usingTheGrid.getByRole('radio',{name:'Option 2'}).check({force:true}) //check options 1 check sẽ là false expect(await usingTheGrid.getByRole('radio', {name: 'Option 1'}).isChecked()).toBeFalsy() expect(await usingTheGrid.getByRole('radio', {name: 'Option 2'}).isChecked()).toBeTruthy() })
})