setValue of {useState} from "preact/hooks" not working in typescript automatic test, but manually it works fine?

Recently I tried creating a web app with the below tools and found that setValue from import { useState } from "preact/hooks;" seems not to work in the automatic testing but manually it works fine!?

I googled lots of info on the Internet but found nothing useful so far, therefore it's appreciated if anyone could shed some light on the possible cause and solutions...

• Language: TypeScript
• Runtime: Deno
• Framework: Fresh
• E2E Test: Sinco

/** @jsx h */
import { h } from "preact";
import { useState } from "preact/hooks";

const search = () => {
  const [inputValue, setValue] = useState("");

  return (
    <div>
      <input
        type="text"
        placeholder="search a job"
        onInput={(e) => setValue(e.target.value)}
      />
      <button onClick={() => location.replace("/jobs/" + inputValue)}>
        Search
      </button>
    </div>
  );
};
export default search;

-> setValue is for capturing user input from the input field, which will be used as part of the URI that the clicking button will redirect to. It works perfectly fine after I launched and use it manually...

Below is the command I used to launch the web app and test it manually, where setValue of {useState} from "preact/hooks" works perfectly fine when interacting with it manually.

 deno task dev

However, it seems not working when running E2E automatic testing with the below typescript codes, "await input.value(name);" works fine but for some unknown reasons, setValue seems not working and is not able to pass the user-input to the button, which always causes redirecting to incorrect URI by pressing the button and fail the test.

Below is the command I used to launch test.ts

deno task start && CHROME_BIN=$(which chrome) deno task test --quiet

import { buildFor } from "sinco/mod.ts";
import { assertEquals } from "testing/asserts.ts";

const CHROME_BIN = Deno.env.get("CHROME_BIN");

Deno.test("E2E test", async (t) => {
  /* Start Sinco */
  const { browser, page } = await buildFor("chrome", {
    binaryPath: CHROME_BIN,
  });

  const index = "http://localhost:8000/";
  
  await t.step("search a random string and redirect by pressing search button", async () => {
    const input = await page.querySelector("input");

    const name = crypto.randomUUID().slice(0, 7);
    await input.value(name);

    const button = await page.querySelector("button");
    await button.click({ waitFor: "navigation" });

    assertEquals(await page.location(), `${index}jobs/${name}`);

    const body = await page.evaluate(() => {
      return document.querySelector("div")?.innerText;
    });
    assertEquals(body, `Job "${name}" is not available`);
  });
  
  
  }

The error would be like as below: error: AssertionError: Values are not equal:

    [Diff] Actual / Expected

-   http://localhost:8000/jobs
+   http://localhost:8000/jobs/c809b1d

Really appreciated if anyone can have a look and shed some light, thanks for any help you can provide in advance.