tests: avoid StaleElementReferenceError in descriptors scenario

frontend/packages/operator-lifecycle-manager/integration-tests/scenarios/descriptors.scenario.ts

@@ -19,6 +19,7 @@ import {
 } from '@console/internal-integration-tests/protractor.conf';
 import * as crudView from '@console/internal-integration-tests/views/crud.view';
 import * as yamlView from '@console/internal-integration-tests/views/yaml.view';
+import * as operatorView from '../views/operator.view';
 import { SpecCapability, StatusCapability } from '../../src/components/descriptors/types';
 
 const defaultValueFor = <C extends SpecCapability | StatusCapability>(capability: C) => {
@@ -375,7 +376,7 @@ describe('Using OLM descriptor components', () => {
 
   it('displays list containing operands', async () => {
     await crudView.resourceRowsPresent();
-    expect(crudView.rowForName(testCR.metadata.name).isDisplayed()).toBe(true);
+    expect(operatorView.operandLink(testCR.metadata.name).isDisplayed()).toBe(true);
   });
 
   it('displays detail view for operand', async () => {
@@ -395,17 +396,15 @@ describe('Using OLM descriptor components', () => {
   });
 
   testCSV.spec.customresourcedefinitions.owned[0].specDescriptors.forEach((descriptor) => {
-    const label = element(by.cssContainingText('.olm-descriptor__title', descriptor.displayName));
-
     it(`displays spec descriptor for ${descriptor.displayName}`, async () => {
+      const label = operatorView.descriptorLabel(descriptor);
       expect(label.isDisplayed()).toBe(true);
     });
   });
 
   testCSV.spec.customresourcedefinitions.owned[0].statusDescriptors.forEach((descriptor) => {
-    const label = element(by.cssContainingText('.olm-descriptor__title', descriptor.displayName));
-
     it(`displays status descriptor for ${descriptor.displayName}`, async () => {
+      const label = operatorView.descriptorLabel(descriptor);
       expect(label.isDisplayed()).toBe(true);
     });
   });
@@ -491,11 +490,8 @@ describe('Using OLM descriptor components', () => {
     await browser.wait(until.presenceOf($('#metadata\\.name')));
     await element(by.buttonText('Create')).click();
     await crudView.isLoaded();
-    await browser.wait(until.visibilityOf(crudView.rowForName(testCR.metadata.name)));
-    await crudView
-      .rowForName(testCR.metadata.name)
-      .element(by.linkText(testCR.metadata.name))
-      .click();
+    await browser.wait(until.visibilityOf(operatorView.operandLink(testCR.metadata.name)));
+    await operatorView.operandLink(testCR.metadata.name).click();
     await browser.wait(until.presenceOf($('.loading-box__loaded')), 5000);
 
     expect($('.co-operand-details__section--info').isDisplayed()).toBe(true);

frontend/packages/operator-lifecycle-manager/integration-tests/views/operator.view.ts

@@ -0,0 +1,6 @@
+import { $ } from 'protractor';
+import { Descriptor } from '../../src/components/descriptors/types';
+
+export const operandLink = (name: string) => $(`[data-test-operand-link="${name}"]`);
+export const descriptorLabel = ({ displayName }: Descriptor) =>
+  $(`[data-test-descriptor-label="${displayName}"]`);

frontend/packages/operator-lifecycle-manager/src/components/descriptors/spec/index.tsx

@@ -204,7 +204,9 @@ export const SpecDescriptor: React.SFC<DescriptorProps> = (props) => {
     <dl className="olm-descriptor">
       <div style={{ width: 'max-content' }}>
         <Tooltip content={descriptor.description}>
-          <dt className="olm-descriptor__title">{descriptor.displayName}</dt>
+          <dt className="olm-descriptor__title" data-test-descriptor-label={descriptor.displayName}>
+            {descriptor.displayName}
+          </dt>
         </Tooltip>
       </div>
       <dd className="olm-descriptor__value">

frontend/packages/operator-lifecycle-manager/src/components/descriptors/status/index.tsx

@@ -114,7 +114,9 @@ export const StatusDescriptor: React.SFC<DescriptorProps> = (props) => {
     <dl className="olm-descriptor">
       <div style={{ width: 'max-content' }}>
         <Tooltip content={descriptor.description}>
-          <dt className="olm-descriptor__title">{descriptor.displayName}</dt>
+          <dt className="olm-descriptor__title" data-test-descriptor-label={descriptor.displayName}>
+            {descriptor.displayName}
+          </dt>
         </Tooltip>
       </div>
       <dd className="olm-descriptor__value">

frontend/packages/operator-lifecycle-manager/src/components/index.tsx

@@ -122,6 +122,7 @@ export const OperandLink: React.SFC<OperandLinkProps> = (props) => {
           props.obj,
         )}/${name}`}
         className="co-resource-item__resource-name"
+        data-test-operand-link={name}
       >
         {name}
       </Link>