CODEWITHSUNDEEP
typescriptautomated-testse2e-testingtestcafeweb-testing
Sagick
Sagick

Reputation: 327

my test is failing when I run headless because it is invisible

I am testing a dotnet application trying to select a drop-down option. the selectors are already within the dom from the start, but they do not become visible until i click on the dropdown.

when I try to click on the option it fails saying it is not visible. Right before I click I log if it is visible or not. In firefox, it says it is visible, in chrome it says it is not.

regardless both will click on the dropdown option when not running headless. below is the code and log output:

code:

  /**
   * Selects a dropdown option based on the passed-in criteria
   *
   * @private
   * @param {TestController} t
   * @param {(Selector | SelectorPromise)} fieldSelector The selector of the dropdown field
   * @param {string} [text] If searching by text displayed
   * @param {string} [value] If searching by underlying value="yourVal"
   * @param {number} [index=-1] If searching by a specific index
   * @param {boolean} [randomly=null] Chooses random option
   * @param {boolean} [exactText=null] Uses exact text on string compare
   * @returns {Promise<void>}
   * @memberof CorePage
   */
  private async selectDropdownOption(
    t: TestController,
    fieldSelector: Selector | SelectorPromise,
    text?: string,
    value?: string,
    index: number = -1,
    randomly: boolean = null,
    exactText: boolean = null
  ): Promise<void> {
    await this.wait(t).then(async () => {
      await t.click(fieldSelector);
      const options = fieldSelector.find('option');
      const fieldName: string = await fieldSelector.getAttribute('name');
      await t
        .expect(await options.count)
        .gt(0, `${fieldName} dropdown did not contain any options.`);
      const assertMsg = `${fieldName} dropdown: The option ${text} that we wanted was not found.`;
      let selectedElement: Selector;

      if (text) {
        selectedElement = exactText
          ? options.withExactText(text).nth(0)
          : options.withText(text).nth(0);
      } else if (value) {
        selectedElement = options.parent().find(`option[value='${value}']`);
      } else if (index > -1) {
        selectedElement = options.nth(index);
      } else if (randomly) {
        if ((await options.count) === 1) {
          selectedElement = options.nth(0);
        } else {
          // change with caution. We don't want to allow the selection of the first option as it may be null
          const randomIndex: number = this.getRandomInt(1, (await options.count) - 1);
          selectedElement = options.nth(randomIndex);
        }
      }
      await this.waitForElement(t, selectedElement);
      console.log(await selectedElement.visible);
      await t
        .expect(await selectedElement.exists)
        .ok(assertMsg)
        .click(selectedElement);
    });
  }


AddUsers
true
 × add Random User and Assert Exists

   1) The element that matches the specified selector is not visible.

      Browser: Firefox 70.0 / Windows 10

         285 |      await this.waitForElement(t, selectedElement);
         286 |      console.log(await selectedElement.visible);
         287 |      await t
         288 |        .expect(await selectedElement.exists)
         289 |        .ok(assertMsg)
       > 290 |        .click(selectedElement);
         291 |    });
         292 |  }
         293 |
         294 |  /**
         295 |   *

note that waitforelement() waits for an element to exist and be visible for up to 10 seconds and note that I am passing select an option randomly to this function.

Upvotes: 1

Views: 1086

Answers (1)

Sagick
Sagick

Reputation: 327

when this happens try taking a screenshot or video. after taking a screen shot I realized that a date popup shows on top when i run on my screen but shows up on bottom when run headless due to autofullscreen based on where the page is the date popup adjusts. if it appears on the bottom it covers up the next element I tried to click on. adding a simple presskey esc after filling out the previous field fixed it

Upvotes: 2

Related Questions