cf.completefrontend

Predict the outputMedium

getByText or getByRole: which element does each query find?

The page has three buttons. After it renders, a test runs these six queries in order and logs what each finds: the element's tagName, or null when a query… finds nothing.

console.log(screen.getByText("Save").tagName);
console.log(screen.getByRole("button", { name: "Save" }).tagName);
console.log(screen.getByText("×").tagName);
console.log(screen.queryByRole("button", { name: "×" }));
console.log(screen.queryByText("Add Gyokuro"));
console.log(screen.getByRole("button", { name: "Add Gyokuro" }).tagName);
What does it log, and what does the page show?
export default function App() {
  return (
    <>
      <button>
        <span>Save</span>
      </button>
      <button aria-label="Remove Sencha">×</button>
      <button>
        Add <strong>Gyokuro</strong>
      </button>
    </>
  );
}

It runs in development, rendered as <App />, and then:

  1. A test runs the six queries above, in order, and logs each result.

The answer

Work out every line it logs, in order, and what the page shows at the end. Then check.

Checking your sign-in…