eyes-browser.html

<input id="apiKey" type="password" placeholder="API key" />
<button>Capture me</button>
<input id="url" placeholder="url"><button id="go">go to</button>
<div id="frame-container">
    <iframe src="https://eyes.applitools.com/app/v/10_16__GHA_4035__2024_06_04__14_27_25__942802943/Deploy/Main/build/13ed0c95dd86dbd9eef1.png"></iframe>
</div>
<pre></pre>
<script>
  document.querySelector("button").addEventListener("click", async () => {
    const API_KEY = document.querySelector("#apiKey").value || localStorage.getItem("API_KEY")

    if(API_KEY) {
        localStorage.setItem("API_KEY", API_KEY)
    }

    await __applitools.openEyes({
      type: "vg",
      concurrency: 20,
      config: {
        apiKey: "mb7vvK3R105BR8EwW97T7F8TVsEF4Ui110ncAYWNWaiNQLBk110",
        appName: "Demo App",
        testName: "debug using demo page - " + document.querySelector("iframe").src,
        apiKey: API_KEY,
        serverUrl: "https://eyes.applitools.com/",
        browsersInfo: [
          { name: "chrome", width: 1440, height: 900, os: "Linux" },
        ],
      },
    });
    await __applitools.eyes.check({
      settings: { name: "my step", fully: true, region: 'iframe', },
    });
    const result = await __applitools.eyes.close({throwErr: false});
    document.querySelector("pre").innerHTML = `
        <a href="${result[0].url}">link to first result</a><br/>
    `
    document.querySelector("pre").innerHTML += JSON.stringify(result, null, 2)
  });

  document.querySelector("#go").addEventListener("click", () => {
    document.querySelector("#frame-container iframe").src = document.querySelector("#url").value
    localStorage.setItem("URL", document.querySelector("#url").value)
  })
  if(localStorage.URL) {
    document.querySelector("#url").value = localStorage.URL
  }
</script>
<style>
#frame-container {
  height: 300px;
  width: 300px;
  resize: both;
  overflow: auto;
  padding: 10px;

  iframe {
    width: 100%;
    height: 100%;
  }
}
</style>