[Discover][UnifiedFieldList] Fix potential wrong click target due to a layout shift (#169279)

Fix a flaky test caused by a layout shift that causes the false element to get a click. With the keyboard based approach this can be ruled out and on top of it, `pressEnter` of test subjects can be used in other cases, too. On top of that also the click based method for this action is improved, which is consumed by other parts of the functional test suites.
This commit is contained in:
Matthias Wilhelm 2023-10-31 08:11:24 +01:00 committed by GitHub
parent 8ec87da219
commit 19bc64e91c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 27 additions and 5 deletions

View file

@ -681,7 +681,6 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
allFields = await PageObjects.unifiedFieldList.getAllFieldNames();
expect(allFields.includes('_bytes-runtimefield2')).to.be(true);
expect(allFields.includes('_bytes-runtimefield')).to.be(false);
await PageObjects.discover.removeField('_bytes-runtimefield');
await PageObjects.header.waitUntilLoadingHasFinished();
await PageObjects.unifiedFieldList.waitUntilSidebarHasLoaded();

View file

@ -388,15 +388,15 @@ export class DiscoverPageObject extends FtrService {
public async editField(field: string) {
await this.retry.try(async () => {
await this.unifiedFieldList.clickFieldListItem(field);
await this.testSubjects.click(`discoverFieldListPanelEdit-${field}`);
await this.unifiedFieldList.pressEnterFieldListItemToggle(field);
await this.testSubjects.pressEnter(`discoverFieldListPanelEdit-${field}`);
await this.find.byClassName('indexPatternFieldEditor__form');
});
}
public async removeField(field: string) {
await this.unifiedFieldList.clickFieldListItem(field);
await this.testSubjects.click(`discoverFieldListPanelDelete-${field}`);
await this.unifiedFieldList.pressEnterFieldListItemToggle(field);
await this.testSubjects.pressEnter(`discoverFieldListPanelDelete-${field}`);
await this.retry.waitFor('modal to open', async () => {
return await this.testSubjects.exists('runtimeFieldDeleteConfirmModal');
});

View file

@ -94,11 +94,23 @@ export class UnifiedFieldListPageObject extends FtrService {
});
}
public async waitUntilFieldPopoverIsLoaded() {
await this.retry.waitFor('popover is loaded', async () => {
return !(await this.find.existsByCssSelector('[data-test-subj*="-statsLoading"]'));
});
}
public async clickFieldListItem(field: string) {
await this.testSubjects.moveMouseTo(`field-${field}`);
await this.testSubjects.click(`field-${field}`);
await this.waitUntilFieldPopoverIsOpen();
// Wait until the field stats popover is opened and loaded before
// hitting the edit button, otherwise the click may occur at the
// exact time the field stats load, triggering a layout shift, and
// will result in the "filter for" button being clicked instead of
// the edit button, causing test flakiness
await this.waitUntilFieldPopoverIsLoaded();
}
public async clickFieldListItemToggle(field: string) {
@ -106,6 +118,10 @@ export class UnifiedFieldListPageObject extends FtrService {
await this.testSubjects.click(`fieldToggle-${field}`);
}
public async pressEnterFieldListItemToggle(field: string) {
await this.testSubjects.pressEnter(`field-${field}-showDetails`);
}
public async clickFieldListItemAdd(field: string) {
await this.waitUntilSidebarHasLoaded();

View file

@ -164,6 +164,13 @@ export class TestSubjects extends FtrService {
await this.findService.clickByCssSelector(testSubjSelector(selector), timeout, topOffset);
}
public async pressEnter(selector: string, timeout: number = this.FIND_TIME): Promise<void> {
this.log.debug(`TestSubjects.pressEnter(${selector})`);
const element = await this.find(selector, timeout);
await element.focus();
await element.pressKeys(this.ctx.getService('browser').keys.ENTER);
}
public async doubleClick(selector: string, timeout: number = this.FIND_TIME): Promise<void> {
this.log.debug(`TestSubjects.doubleClick(${selector})`);
const element = await this.find(selector, timeout);