fix(check): allow checking/unchecking role=radio elements (#8821)

We already do this for `role=checkbox` but not for radio.
This commit is contained in:
Dmitry Gozman 2021-09-09 16:01:21 -07:00 committed by GitHub
parent 7bbb63d143
commit e85fba1c7d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 1 deletions

View File

@ -474,7 +474,7 @@ export class InjectedScript {
return !disabled && editable; return !disabled && editable;
if (state === 'checked') { if (state === 'checked') {
if (element.getAttribute('role') === 'checkbox') if (['checkbox', 'radio'].includes(element.getAttribute('role') || ''))
return element.getAttribute('aria-checked') === 'true'; return element.getAttribute('aria-checked') === 'true';
if (element.nodeName !== 'INPUT') if (element.nodeName !== 'INPUT')
return 'error:notcheckbox'; return 'error:notcheckbox';

View File

@ -85,6 +85,24 @@ it('should check radio', async ({page}) => {
expect(await page.evaluate(() => window['two'].checked)).toBe(true); expect(await page.evaluate(() => window['two'].checked)).toBe(true);
}); });
it('should check radio by aria role', async ({page}) => {
await page.setContent(`<div role='radio' id='checkbox'>CHECKBOX</div>
<script>
checkbox.addEventListener('click', () => checkbox.setAttribute('aria-checked', 'true'));
</script>`);
await page.check('div');
expect(await page.evaluate(() => window['checkbox'].getAttribute('aria-checked'))).toBe('true');
});
it('should uncheck radio by aria role', async ({page}) => {
await page.setContent(`<div role='radio' id='checkbox' aria-checked="true">CHECKBOX</div>
<script>
checkbox.addEventListener('click', () => checkbox.setAttribute('aria-checked', 'false'));
</script>`);
await page.uncheck('div');
expect(await page.evaluate(() => window['checkbox'].getAttribute('aria-checked'))).toBe('false');
});
it('should check the box by aria role', async ({page}) => { it('should check the box by aria role', async ({page}) => {
await page.setContent(`<div role='checkbox' id='checkbox'>CHECKBOX</div> await page.setContent(`<div role='checkbox' id='checkbox'>CHECKBOX</div>
<script> <script>
@ -94,6 +112,15 @@ it('should check the box by aria role', async ({page}) => {
expect(await page.evaluate(() => window['checkbox'].getAttribute('aria-checked'))).toBe('true'); expect(await page.evaluate(() => window['checkbox'].getAttribute('aria-checked'))).toBe('true');
}); });
it('should uncheck the box by aria role', async ({page}) => {
await page.setContent(`<div role='checkbox' id='checkbox' aria-checked="true">CHECKBOX</div>
<script>
checkbox.addEventListener('click', () => checkbox.setAttribute('aria-checked', 'false'));
</script>`);
await page.uncheck('div');
expect(await page.evaluate(() => window['checkbox'].getAttribute('aria-checked'))).toBe('false');
});
it('should throw when not a checkbox', async ({page}) => { it('should throw when not a checkbox', async ({page}) => {
await page.setContent(`<div>Check me</div>`); await page.setContent(`<div>Check me</div>`);
const error = await page.check('div').catch(e => e); const error = await page.check('div').catch(e => e);