'How can I automate the filling of inputs and selecting options and general flow of a web site on development mode?

I'm developing a web app with Angular. I waste hours everyday trying to test a specific feature I'm trying to make in a modal which appears after filling so many fields, selecting options from selects, and clicking then filling the input again in the modal.

I tried forcing first input, which is a select input (from an external library; that's why I can't use template references and viewChild methods) of the very first step I need to fill to get to the modal, but I have no luck. I tried this:

  constructor() {

    setTimeout(() => {
      const selectContainer  = document.querySelector('.select_container');
      const selectInput = selectContainer!.querySelector('.w-full') as HTMLInputElement;
      console.log('about to click!')
      selectContainer.click();
    },100)
  }

However, click does not occur, because options are not shown.

Is there a way to do this in a better (and working) and less rudimentary way?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source