Using waitForKeyElements to click two buttons, one after the other, once page is properly loaded

Question

I'm currently trying to figure out a way to automatically click buttons on a page on what I believe is an AJAX driven site. I am carrying this out via Tampermonkey (Javascript Userscript).

Right now, the following script works in the console, and clicks a target button on the page via HTML/CSS elements:

document.querySelector('li[data-v-29761082].list-item').click();

I then use the following script (which also works in the console on the page), to click the next button (which appears after pressing the first):

document.querySelector('button.el-button.button.el-button--primary.el-button--xl').click();

So both of these lines of code work in the console, but I need to integrate them into a single script that automatically runs in the page via Tampermonkey. Unfortunately, when used in Tampermonkey, nothing happens, and the buttons do not click. I think this is because it is an AJAX-based site.

I believe that the waitForKeyElements function will be useful in having the code execute once the page has been properly loaded.

I would like both of these separate lines of code to be used in tandem (one after the other), but both must wait and require that their elements load and be on the page first, before executing and continuing to the next selection (the second line of code).

I have used the waitForKeyElements function before, but I am having trouble finding the correct methodology and syntax for this particular script:

const findAndClickParent = text => [...document.querySelectorAll('label > span')].forEach(e => e.textContent === "Yes" ? e.parentElement.click(): null);

waitForKeyElements (
  "label",
  () => {
    findAndClickParent("Yes");
  }
);

So I need to find a similar waitForKeyElements method to properly execute the above two lines of code within Tampermonkey and on the page. Right now I'm having a little trouble getting the syntax right and being able to properly carry out the code one after the other. Any and all advice would be deeply appreciated.

I've not heard of "waitForKeyElements", but the problem is simple. Put code in functions, call functions as needed. You can change when the tampermonkey executes, so have it wait until the page is loaded or at least dom ready. Use an onload event to get to the first one. If there is no built-in event (like an ajax callback) to use for the 2nd's timing, use object detection to look for the property you need. i use a setInterval for that. in your modifying function, you ask if the prop to be mutated is present and return early if not. If it's there, clear the interval, and make the change. — dandavis, Feb 16 '19 at 19:15

Using waitForKeyElements to click two buttons, one after the other, once page is properly loaded

0 Answers0