Bug 2084102

Summary: [e2e] Many elements are lacking proper selector like 'data-test-id' or 'data-test'
Product: Container Native Virtualization (CNV) Reporter: Guohua Ouyang <gouyang>
Component: User ExperienceAssignee: Dana Orr <dorr>
Status: CLOSED ERRATA QA Contact: Guohua Ouyang <gouyang>
Severity: urgent Docs Contact:
Priority: urgent    
Version: 4.11.0CC: cnv-qe-bugs, gouyang, vszocs, yzamir
Target Milestone: ---   
Target Release: 4.11.0   
Hardware: Unspecified   
OS: Unspecified   
Whiteboard:
Fixed In Version: Doc Type: If docs needed, set a value
Doc Text:
Story Points: ---
Clone Of: Environment:
Last Closed: 2022-09-14 19:32:30 UTC Type: Bug
Regression: --- Mount Type: ---
Documentation: --- CRM:
Verified Versions: Category: ---
oVirt Team: --- RHEL 7.3 requirements from Atomic Host:
Cloudforms Team: --- Target Upstream Version:
Embargoed:

Description Guohua Ouyang 2022-05-11 12:11:23 UTC
Description of problem:
Since we move to the new UI, many elements have no proper selector like 'data-test-id' or 'data-test' or 'id'.

Why this is a problem to qe:
1. it's hard to locate the element while writing tests.
2. tests is more flaky.
3. tests is more fragile when UI changed.

examples about elements lack proper selector:
1. edit buttons on vm tabs: scheduling tab
2. `id="pf-select-toggle-id-2098"` is used for dropdown menu, which is not usable. such as disk source dropdown while creating the VM, add nic/disk modal.

Version-Release number of selected component (if applicable):
OCP 4.11

How reproducible:


Steps to Reproduce:
1.
2.
3.

Actual results:


Expected results:


Additional info:

Comment 1 Yaacov Zamir 2022-05-12 07:25:23 UTC
notes for reviewer:

in kubevirt plugin we declare our test id to be "data-test-id" [1]
[1] https://github.com/kubevirt-ui/kubevirt-plugin/blob/main/jest-setup.ts#L7

Vojtech hi,
should we use a more common name like 'data-testid', do you know of any RH guidlines, what is used by other RH projects ?

Comment 2 Yaacov Zamir 2022-05-12 07:28:18 UTC
notes for verifying:

tests should always use byTestID, in cases this is not posible it should be clear why not using a test id.

Comment 3 Vojtech Szocs 2022-05-12 19:50:58 UTC
Hi, Kubevirt dynamic plugin already uses '@testing-library/dom' and '@testing-library/jest-dom' together with Jest.

> import { configure } from '@testing-library/dom';

This applies to "native" test approach when you have unit tests executed by Jest in jsdom env.

> import { configure } from '@testing-library/react';

This can be used to tweak React-specific wrapper of the testing library. Since we have React components, I'd go with this one.

> should we use a more common name like 'data-testid', do you know of any RH guidlines, what is used by other RH projects ?

We can use "data-test-id" attribute to identify DOM elements that we need to reference in our tests (either unit/Jest or e2e/Cypress tests).

I'd advise against using the standard "id" attribute because that one is supposed to be unique within the DOM tree.

As for RH guidelines, I'm only aware of the Open UI Automation (OUIA) spec which is part of PatternFly:

https://www.patternfly.org/v4/developer-resources/open-ui-automation/

Comment 4 Yaacov Zamir 2022-05-14 18:04:30 UTC
> > import { configure } from '@testing-library/react';
> 
> This can be used to tweak React-specific wrapper of the testing library. Since we have React components, I'd go with this one.

hmm, @testing-library/react uses 'data-testid' [1]

[1] https://github.com/testing-library/dom-testing-library/blob/45830f580ced3ae5337af9ace4a9bd65067dfe5c/src/config.ts#L13

my vote is to move the 'data-testid' but I'm fine with the current 'data-test-id' we use today too.

Comment 7 errata-xmlrpc 2022-09-14 19:32:30 UTC
Since the problem described in this bug report should be
resolved in a recent advisory, it has been closed with a
resolution of ERRATA.

For information on the advisory (Important: OpenShift Virtualization 4.11.0 Images security and bug fix update), and where to find the updated
files, follow the link below.

If the solution does not work for you, open a new bug report.

https://access.redhat.com/errata/RHSA-2022:6526