fix flaky x-pack/test/stack_functional_integration APM smoke test (#1…

…17250)

* waitUntilLoadingHasFinished() and wait for table caption to be set

* just formatting change to make eslint happy

x-pack/test/stack_functional_integration/apps/apm/apm_smoke_test.js

@@ -9,20 +9,32 @@ export default function ({ getService, getPageObjects }) {
   describe('APM smoke test', function ampsmokeTest() {
     const browser = getService('browser');
     const testSubjects = getService('testSubjects');
-    const PageObjects = getPageObjects(['common', 'timePicker']);
+    const PageObjects = getPageObjects(['common', 'timePicker', 'header']);
     const find = getService('find');
     const log = getService('log');
+    const retry = getService('retry');
 
     before(async () => {
       await browser.setWindowSize(1400, 1400);
       await PageObjects.common.navigateToApp('apm');
+      await PageObjects.header.waitUntilLoadingHasFinished();
       await PageObjects.timePicker.setCommonlyUsedTime('Last_1 year');
+      await PageObjects.header.waitUntilLoadingHasFinished();
     });
 
     it('can navigate to APM app', async () => {
       await testSubjects.existOrFail('apmMainContainer', {
         timeout: 10000,
       });
+      // wait for this last change on the page;
+      // <caption class="euiScreenReaderOnly euiTableCaption">This table contains 1 rows out of 1 rows; Page 1 of 1.</caption>
+      // but "<caption class="euiScreenReaderOnly euiTableCaption">" always exists so we have to wait until there's text
+      await retry.waitForWithTimeout('The APM table has a caption', 5000, async () => {
+        return (await (await find.byCssSelector('caption')).getAttribute('innerHTML')).includes(
+          'This table contains '
+        );
+      });
+
       await find.clickByDisplayedLinkText('apm-a-rum-test-e2e-general-usecase');
       log.debug('### apm smoke test passed');
       await find.clickByLinkText('general-usecase-initial-p-load');