Autobot: Automate Merging Dependabot PRs

[nelsonic]

document
  .querySelectorAll(".octicon-git-pull-request.color-fg-open")[0]
  .closest(".notification-list-item-link")
  .click();

setTimeout(() => {
  document
    .querySelectorAll(".octicon-file-diff")[0]
    .closest(".tabnav-tab")
    .click();

  setTimeout(() => {
    document.querySelectorAll(".js-reviews-toggle")[0].click();
    var text = "Thanks @dependabot 🤖 👌";
    document.getElementById("pull_request_review_body").value = text;
    document.querySelectorAll('[value="approve"]')[0].click();
    document.querySelectorAll("button.float-left")[1].click();
  }, 2000);
}, 2000);

Followed by:

document.querySelectorAll(".hx_create-pr-button")[0].click();
document.querySelectorAll(".js-merge-commit-button")[0].click();

setTimeout(() => {
  document.querySelectorAll('[title="Done"]')[0].click();
}, 2000);

# Context:

We have quite a few Elixir/Phoenix projects ... github.com/dwyl?q=language=elixir

so when a random dependency is patched and Dependabot creates Pull Requests to update it,
we get this kind of thing:

I don't want to merge them all without supervision because I want to be informed of the updates.
But I do want to a generic script I can use to automate.
Think of it as "supervised automation" 😜

[nelsonic]

Using my DOM script from #1 as the starting point.

This works manually in Chrome/FF dev tools:

function run() {
  document
    .querySelectorAll(".octicon-git-pull-request.color-fg-open")[0]
    .closest(".notification-list-item-link")
    .click();

  setTimeout(() => {
    document
      .querySelectorAll(".octicon-file-diff")[0]
      .closest(".tabnav-tab")
      .click();

    setTimeout(() => {
      document.querySelectorAll(".js-reviews-toggle")[0].click();
      var text = "Thanks @dependabot 🤖 👌";
      document.getElementById("pull_request_review_body").value = text;
      document.querySelectorAll('[value="approve"]')[0].click();
      document.querySelectorAll("button.float-left")[2].click();
      next();
    }, 5000);
  }, 5000);
}
run();

function next() {
  setTimeout(() => {
    document.querySelectorAll(".hx_create-pr-button")[0].click();
    document.querySelectorAll(".js-merge-commit-button")[0].click();

    setTimeout(() => {
      document.querySelectorAll('[title="Done"]')[0].click();
      run();
    }, 4000);
  }, 4000);
}

Due to the full-page-refresh when submitting a PR review which is both server and client rendered 🙄
It cannot be run "unsupervised" ... 🤦‍♂️
Considering building a chrome extension for this. 💭

[nelsonic]

OK. not going to waste any more time on this. It's definitely a distraction!!

But when I need the script it's better to run it in two stages:

document
  .querySelectorAll(".octicon-git-pull-request.color-fg-open")[0]
  .closest(".notification-list-item-link")
  .click();

setTimeout(() => {
  document
    .querySelectorAll(".octicon-file-diff")[0]
    .closest(".tabnav-tab")
    .click();

  setTimeout(() => {
    document.querySelectorAll(".js-reviews-toggle")[0].click();
    var text = "Thanks @dependabot 🤖 👌";
    document.getElementById("pull_request_review_body").value = text;
    document.querySelectorAll('[value="approve"]')[0].click();
    document.querySelectorAll("button.float-left")[2].click();
  }, 3000);
}, 3000);

Followed by:

document.querySelectorAll(".hx_create-pr-button")[0].click();
document.querySelectorAll(".js-merge-commit-button")[0].click();

setTimeout(() => {
  document.querySelectorAll('[title="Done"]')[0].click();
}, 4000);

because the DOM loading is incredibly unreliable!

[nelsonic]

Quick demo:

autobot-demo.mov

[nelsonic]

Once you have run both script blocks once you can use the up arrow and enter keys to repeat. ♻️
This is considerably faster than clicking through, typing, clicking, waiting, locating buttons ... ⏳ 🙄

[nelsonic]

Reading: https://violentmonkey.github.io/get-it/

Given that Microsoft already know everything I'm doing on GitHub ...
Considering installing Edge browser: https://www.microsoft.com/en-us/edge

And using it as my GitHub Notifications browser ... 💭

[nelsonic]

Let's come back to this.

[nelsonic]

Top tip. if you don't quite the Chrome App your DevTools Console history maintains any scripts/code you have run so even though I had closed the tab I could still retrieve the script from history. just used it. so glad I wrote it. let's see how long the DOM attributes/classes last before GH inevitably does another re-design. 🙄

[nelsonic]

Installing Microsoft Edge on Mac requires 730 MB of storage ... 🙄

[nelsonic]

🙄

[nelsonic]

Literally just downloaded Edge from the Microsoft site and there's already an update ...

Not even 5 mins later. 🤦‍♂️
Why didn't they just update the binary and save me this noise?!

[nelsonic]

Yay! GitHub updated their markup, again ... 🎉 (🙄)

Gotta update the script. 🧑‍💻 ⌛

[nelsonic]

Easy enough, the number of buttons on the page was reduced from 3 to 2 so the index for the "Submit review" button is now 1 not 2:

document
  .querySelectorAll(".octicon-git-pull-request.color-fg-open")[0]
  .closest(".notification-list-item-link")
  .click();

setTimeout(() => {
  document
    .querySelectorAll(".octicon-file-diff")[0]
    .closest(".tabnav-tab")
    .click();

  setTimeout(() => {
    document.querySelectorAll(".js-reviews-toggle")[0].click();
    var text = "Thanks @dependabot 🤖 👌";
    document.getElementById("pull_request_review_body").value = text;
    document.querySelectorAll('[value="approve"]')[0].click();
    document.querySelectorAll("button.float-left")[1].click();
  }, 2000);
}, 2000);

I would still like to make the whole script run as one but now is not the time to be messing with that because of network latency ... ⏳

[nelsonic]

var links = document
  .querySelectorAll(".octicon-git-pull-request.color-fg-open");
links[links.length - 1].closest(".notification-list-item-link").click();
setTimeout(() => {
  document
    .querySelectorAll(".octicon-file-diff")[0]
    .closest(".tabnav-tab")
    .click();

  setTimeout(() => {
    document.querySelectorAll(".js-reviews-toggle")[0].click();
    var text = "Thanks @dependabot 🤖 👌";
    document.getElementById("pull_request_review_body").value = text;
    document.querySelectorAll('[value="approve"]')[0].click();
    document.querySelectorAll("button.float-left")[1].click();
  }, 2000);
}, 2000);

[nelsonic]

document.querySelectorAll(".hx_create-pr-button")[0].click();
document.querySelectorAll(".js-merge-commit-button")[0].click();

setTimeout(() => {
  document.querySelectorAll('[aria-label="Done"]')[0].click();
}, 2000);

[nelsonic]

Attempt single script:

var links = document
  .querySelectorAll(".octicon-git-pull-request.color-fg-open");
links[links.length - 1].closest(".notification-list-item-link").click();
setTimeout(() => {
  document
    .querySelectorAll(".octicon-file-diff")[0]
    .closest(".tabnav-tab")
    .click();

  setTimeout(() => {
    document.querySelectorAll(".js-reviews-toggle")[0].click();
    var text = "Thanks @dependabot 🤖 👌";
    document.getElementById("pull_request_review_body").value = text;
    document.querySelectorAll('[value="approve"]')[0].click();
    document.querySelectorAll("button.float-left")[1].click();
    // merge:
    setTimeout(() => {
        document.querySelectorAll(".hx_create-pr-button")[0].click();
        document.querySelectorAll(".js-merge-commit-button")[0].click();
        
        setTimeout(() => {
          document.querySelectorAll('[aria-label="Done"]')[0].click();
        }, 1000);
    }, 2000);
  }, 2000);
}, 2000);

[nelsonic]

If someone has merged a bunch of @dependabot PRs e.g:

Then the above script breaks because the DOM has changed. 🤦‍♂️

document
  .querySelectorAll(".notification-list-item-link")[0]
  .click()

setTimeout(() => {
  document
    .querySelectorAll(".octicon-file-diff")[0]
    .closest(".tabnav-tab")
    .click();

  setTimeout(() => {
    document.querySelectorAll(".js-reviews-toggle")[0].click();
    var text = "Thanks @dependabot 🤖 👌";
    document.getElementById("pull_request_review_body").value = text;
    document.querySelectorAll("button.float-left")[1].click();
    setTimeout(() => {
      document.querySelectorAll('[aria-label="Done"]')[0].click();
    }, 3000);
  }, 2000);
}, 2000);