Identifying a DOM element without an ID value

The non-descriptive class names (e.g., c0012, c01143) strongly indicate that, somewhere in the site's stack, the HTML/CSS/JS is being dynamically compiled/generated. As such, you should expect that these identifiers could change drastically and quite frequently & you shouldn't rely on them in your snippet.

Method #1 - document.querySelector() using data-qa-name

You can use the document.querySelector() method to identify based on the button tag, the button type value, as well as the custom data-qa-name attribute. The following demonstrates that this method works to identify the element without relying on the class name or the (no longer-existent) ID value:

(() => {
  console.log(document.querySelector("button[type='button'][data-qa-name='lower']"));
})();

<div class='c0012'>
  <button type="button" tabindex="-1" data-qa-name="lower" data-qa-toggled="false" class="c0180 c01149 c01151">
            <div class="c01143">
                <svg class="c0189 c0191" viewBox="0 0 24 24"><path d="M2,13 L22,13 L22,16 L2,16 L2,13 Z M8,8 L16,8 L16,11 L8,11 L8,8 Z"></path></svg>
            </div>
        <span class="c01142">Lower</span>
    </button>
</div>

You would lift and shift the above by simply calling click() on the identified element, as you had previously:

document.querySelector("button[type='button'][data-qa-name='lower']").click();

Method #2 - document.querySelectorAll(), filtered using .innerText value

While from what you've posted there isn't any strong indication that this data-qa-name attribute would change in either name or value, you can also target the element based on its innerText value similar to the following:

[...document.querySelectorAll("button[type='button']")].find(function (ele) {return ele.innerText === "Lower"})).click();

The following snippet, while it appears succinct, performs the following steps:

1. Enumerates all button elements with an attribute type of button into an Array structure.
2. Finds and returns the first element in the array that has an innerText property equal to the string Lower.
3. Executes the click() method on the identified button.

The only scenario in which this particular snippet wouldn't work to your requirements would be if there are buttons appearing somewhere in the DOM tree before the intended button element that also have an innerText property equal to the string "Lower". You'll have to perform a small amount of testing to confirm which of these snippets will work most consistently in your scenario.

Further reading

Considering your self-professed limited understanding of JavaScript, you may wish to consult the following MDN documentation pages to get a better grasp on the methods and linguistic conventions leveraged above:

• document.querySelector()
• document.querySelectorAll()
• Spread syntax (...)
• Glossary - Array
• Array.find()

With document.querySelector() you can use CSS style selectors to target an element. In the example below it select the first button inside the element with the .c0012 class.

document.querySelector('.c0012 button').click();