locator.filter works with hardcoded value but not variable

Unfortunately, there's no apparent way to pass data into .filter() as there is with page.evaluate(). But as Puppeteer case insensitive text locator with variable from Node scope shows, you can use string concatenation:

const l = 'LOGIN'
await page.locator('a, button').filter(e => e.innerText === '${l}').click()

If a substring is permissible, you might consider

await page.locator('a ::-p-text(LOGIN), button ::-p-text(LOGIN)').click();

or

await page.locator(a ::-p-text(${LOGIN}), button ::-p-text(${LOGIN})).click();

One reason these are less preferable here is the , CSS operator resulting in duplication, which is a bit of a rare use case. See this post for more "find by text" options in Puppeteer.

Nits: prefer .textContent to .innerText, trim the HTML when using ===, and avoid l as a variable name. It's too easy to confuse with 1 or I.

Here's a complete, runnable example:

const puppeteer = require("puppeteer"); // ^24.36.1
const html = `LOGIN
function f() {
  const b = document.querySelector("button");
  b.textContent = "clicked!";
}`;
let browser;
(async () => {
  browser = await puppeteer.launch();
  const [page] = await browser.pages();
  await page.setContent(html);
  const text = 'LOGIN';
  await page.locator(a ::-p-text(${text}), button ::-p-text(${text})).click();
  console.log(await page.$eval("button", el => el.textContent)); // => clicked!
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close());