+
-
-
+
+ ·
·
`.
+*2026-10-06, Connect OpenRouter shown (branch `feat/connect-openrouter-and-screenshots`).*
+The docs site is live: `curl https://kotiko.org/connect/` answers 200 over HTTPS with
+`#kotiko-connect-status` (`role="status"`), no script and its own CSP `
ExecStart="/run.sh"
Environment="PATH="
+ UMask=0077
Restart=on-failure
RestartSec=5
RestartPreventExitStatus=78
```
(`WorkingDirectory=` takes the rest of the line as one path, so spaces need no quotes
- there, only `%` escaping.)
+ there, only `%` escaping. `UMask=0077`, like `umask 077` in `run.sh`, keeps every file
+ the server makes private from the moment it exists; the server also makes its own files
+ 0600 itself, see `Kotiko.DataDir.make_private/1` and the
+ [configuration reference](../../docs/reference/configuration.md#files-in-the-data-folder).
+ Added for Linear SCR-450.)
- After installing, wait up to 20 s for `GET /health` to return 200 and print the result;
on failure print the last 20 journal lines and the exit status.
- Slice 04 adds the old-unit cleanup; slice 40 adds release support.
diff --git a/slices/44-docs-site/SPEC.md b/slices/44-docs-site/SPEC.md
index 7067614..7252dfd 100644
--- a/slices/44-docs-site/SPEC.md
+++ b/slices/44-docs-site/SPEC.md
@@ -363,8 +363,8 @@ slice 11 §4 says Kotiko's content script reads the code, and none did. This sli
`https://kotiko.org/connect/*` (no new permission; a justification row in
`store/chrome-web-store.md`), with four strings (`connect_*`). It sends `{type:
"oauth.code", code}`, writes the outcome into `#kotiko-connect-status`, and then removes the
-code from the address. The "Connect OpenRouter" button stays hidden: showing it is slice
-11's call once the site is live.
+code from the address. The "Connect OpenRouter" button stayed hidden until the site was
+live; slice 11 shows it since 2026-10-06.
**Privacy of the site.** No cookies, analytics, web fonts or embeds. Every Starlight page
carries a CSP `//` (bare captures in `raw/`). The captions are the `s
entries of `store/listing/.json`, set in the design system's display face on the
canvas color; the script stops if the caption's contrast is under 4.5:1 (it is 15.7:1 with
today's tokens). The page is `test/fixtures/pages/store-article.html`, a text written for
-it, so no third-party content or logo appears and no attribution is needed.
+it, so no third-party content or logo appears and no attribution is needed; the script
+serves it at `https://www.example.com/articles/…` (a reserved example address, answered by
+the browser's route, never the internet) so the popup's page line names a website. The run
+takes about a minute: the dashboard shot waits for the background to finish the
+pronunciation of the word the popup shot adds.
| # | id | Shows | Caption (en) |
|---|---|---|---|
@@ -37,9 +41,11 @@ it, so no third-party content or logo appears and no attribution is needed.
| 4 | `welcome` | The welcome page, asking for the next word | Start with the word you want most |
| 5 | `dark` | The same article in dark mode with a card open | Easy on the eyes, day and night |
-Before uploading, look at each file: the popup shot is taken in a tab, so its page line
-reads "Kotiko can't run on browser pages like this one", and the article shots use
-placeholder words chosen for an English reader. A listing in another language gets its own
+Before uploading, look at each file. The popup is opened in a tab of its own, so the script
+first opens the article and answers the popup's "which tab is active" question with that
+real tab: "This page" then describes the article (it stops if the popup says it's on a
+browser page). The welcome shot shows OpenRouter connected, as most learners will see it.
+The article shots use placeholder words chosen for an English reader. A listing in another language gets its own
words and article in the script when its translation lands, and the browser in that
locale.
diff --git a/test/dom/dashboard.test.mjs b/test/dom/dashboard.test.mjs
index 2985685..c81d5b9 100644
--- a/test/dom/dashboard.test.mjs
+++ b/test/dom/dashboard.test.mjs
@@ -1115,6 +1115,9 @@ describe("Word lookups and the words' home (slice 11)", () => {
case "backend.test":
b.sent.push(clone(msg));
return { ok: true, model: "fake/model-a:free", ms: 1234, quota: { remaining: 41, limit: 50 } };
+ case "oauth.start":
+ b.sent.push(clone(msg));
+ return st.oauthError ? { error: "Couldn't reach OpenRouter.", code: "offline" } : { ok: true, url: "https://openrouter.ai/auth?callback_url=https%3A%2F%2Fkotiko.org%2Fconnect%2F" };
case "migrate.preview":
b.sent.push(clone(msg));
return { to: msg.to, count: 23, server: st.server.url };
@@ -1149,6 +1152,9 @@ describe("Word lookups and the words' home (slice 11)", () => {
assert.equal(d.text("#providerNote"), "Free models by default. A key with a credit limit is the safest choice.");
assert.equal(d.text("#lookupState"), "Paste a key to start looking words up.");
assert.equal(d.$("#dataCollectionRow").hidden, false);
+ assert.equal(d.$("#oauthRow").hidden, false, "Connect OpenRouter is shown now that kotiko.org/connect/ is live");
+ assert.equal(d.text("#connectOpenRouter"), "Connect OpenRouter");
+ assert.equal(d.text("#oauthHelp"), "Sign in to OpenRouter in a new tab and Kotiko gets a key, with nothing to copy. Or paste a key below.");
d.$("#lookupKey").value = "sk-or-v1-abcdefghijklmnopqrstuvwxyz-a1b2";
d.$("#saveKey").click();
@@ -1157,6 +1163,7 @@ describe("Word lookups and the words' home (slice 11)", () => {
assert.equal(d.$("#lookupKey").value, "", "the page keeps nothing");
assert.equal(d.text("#lookupKeyMasked"), "Saved key: sk-or-…a1b2");
assert.equal(d.$("#lookupKeyEntry").hidden, true);
+ assert.equal(d.$("#oauthRow").hidden, true, "a saved key hides Connect OpenRouter");
assert.equal(d.text("#lookupState"), "Ready to look words up.");
assert.equal(d.$("#banners").children.length, 0, "the banner goes once lookups work");
assert.equal(JSON.stringify(d.store).includes("abcdefghijklmnop"), false, "never in storage");
@@ -1167,12 +1174,53 @@ describe("Word lookups and the words' home (slice 11)", () => {
d.$("#replaceKey").click();
assert.equal(d.$("#lookupKeyEntry").hidden, false);
+ assert.equal(d.$("#oauthRow").hidden, false, "replacing the key offers Connect OpenRouter again");
d.$("#removeKey").click();
await d.settle();
assert.deepEqual(backend.sent.find((m) => m.type === "secrets.remove"), { type: "secrets.remove", id: "provider:openrouter" });
assert.equal(d.text("#lookupState"), "Paste a key to start looking words up.");
});
+ test("Connect OpenRouter: the sign-in opens in a new tab, the section waits, and the key arriving from the return page shows masked", async () => {
+ const backend = withSettings(fakeBackend(), { ...LOCAL, lookup: { ...LOCAL.lookup, kind: "provider" } });
+ const d = await openDashboard({ local: LOCAL, hash: "#settings/lookups", backend });
+ assert.equal(d.$("#oauthRow").hidden, false);
+ d.$("#connectOpenRouter").click();
+ await d.settle();
+ assert.deepEqual(backend.sent.filter((m) => m.type === "oauth.start"), [{ type: "oauth.start" }]);
+ assert.equal(d.text("#lookupState"), "Waiting for OpenRouter… Finish signing in on the other tab.");
+ assert.equal(d.$("#lookupKeyEntry").hidden, false, "pasting a key stays available while waiting");
+
+ // The background traded the return page's code for a key: it saves it and says so in storage.
+ backend.st.masked["provider:openrouter"] = "sk-or-…c3d4";
+ backend.st.keys.providers.openrouter = true;
+ await d.fake.chrome.storage.local.set({ keys: clone(backend.st.keys), lookup: clone(backend.st.lookup) });
+ await d.settle(10);
+ assert.equal(d.text("#lookupKeyMasked"), "Saved key: sk-or-…c3d4");
+ assert.equal(d.$("#oauthRow").hidden, true);
+ assert.equal(d.text("#lookupState"), "Ready to look words up.");
+ assert.match(d.text("#toasts") ?? d.doc.body.textContent, /Connected to OpenRouter\./);
+ });
+
+ test("Connect OpenRouter: a sign-in that can't start says why; choosing another service stops waiting", async () => {
+ const backend = withSettings(fakeBackend(), { ...LOCAL, lookup: { ...LOCAL.lookup, kind: "provider" } });
+ backend.st.oauthError = true;
+ const d = await openDashboard({ local: LOCAL, hash: "#settings/lookups", backend });
+ d.$("#connectOpenRouter").click();
+ await d.settle();
+ assert.equal(d.$("#lookupState .conn-bad") !== null, true);
+ assert.doesNotMatch(d.text("#lookupState"), /Waiting for OpenRouter/);
+
+ backend.st.oauthError = false;
+ d.$("#connectOpenRouter").click();
+ await d.settle();
+ assert.equal(d.text("#lookupState"), "Waiting for OpenRouter… Finish signing in on the other tab.");
+ d.$$("#providerOptions [role=radio]")[1].click();
+ await d.settle();
+ assert.equal(d.$("#oauthRow").hidden, true, "only OpenRouter has the sign-in");
+ assert.doesNotMatch(d.text("#lookupState"), /Waiting for OpenRouter/);
+ });
+
test("Ollama needs no key, shows its one setting and an editable address; the model is optional", async () => {
const backend = withSettings(fakeBackend(), { ...LOCAL, lookup: { ...LOCAL.lookup, kind: "provider", provider: "ollama" } });
const d = await openDashboard({ local: LOCAL, hash: "#settings/lookups", backend });
diff --git a/test/dom/welcome.test.mjs b/test/dom/welcome.test.mjs
index 09a64f1..de5b4b9 100644
--- a/test/dom/welcome.test.mjs
+++ b/test/dom/welcome.test.mjs
@@ -42,7 +42,7 @@ after(async () => {
const plain = (v) => JSON.parse(JSON.stringify(v));
-async function openWelcome({ locale = "en", accept = null, bases = null, local = {}, reduced = false, network = false } = {}) {
+async function openWelcome({ locale = "en", accept = null, bases = null, local = {}, reduced = false, network = false, exchange = null } = {}) {
const b = bases ?? [locale];
const fake = createFakeChrome({
runtimeId: EXT_ID,
@@ -55,6 +55,8 @@ async function openWelcome({ locale = "en", accept = null, bases = null, local =
const requests = [];
const bgFetch = (url, init) => {
requests.push(String(url));
+ // OpenRouter's PKCE key exchange (Connect OpenRouter), answered here when a test asks.
+ if (exchange && String(url) === "https://openrouter.ai/api/v1/auth/keys") return Promise.resolve(exchange(init));
if (!network) return Promise.reject(new TypeError("Failed to fetch"));
return fetch(String(url).replace("https://openrouter.ai/api/v1", srv.llmUrl), init);
};
@@ -162,7 +164,11 @@ describe("arrival (22 §2)", () => {
assert.deepEqual([chip.getAttribute("role"), chip.getAttribute("aria-checked"), chip.textContent.trim()], ["checkbox", "true", "English"]);
assert.equal(p.text("#addBase"), "Another");
assert.ok(p.visible("#aiSetup"));
- assert.equal(p.text("#aiPaste"), "Paste an OpenRouter key (free)");
+ assert.ok(p.visible("#aiConnect"), "Connect OpenRouter is shown now that kotiko.org/connect/ is live");
+ assert.equal(p.text("#aiConnect"), "Connect OpenRouter (free)");
+ assert.ok(p.$("#aiConnect").classList.contains("btn-primary"));
+ assert.equal(p.text("#aiPaste"), "Paste a key instead");
+ assert.equal(p.text("#connectStatus"), "");
assert.equal(p.text("#askLine"), "What's the first word you'd love to learn?");
assert.equal(p.$("#askText").placeholder, "how do you say hello in Japanese");
assert.equal(p.$("#askText").value, "", "the examples are a placeholder only");
@@ -498,6 +504,64 @@ describe("with the learner's own AI (22 §4, §5)", () => {
});
});
+describe("Connect OpenRouter (11 §4, 22 §4)", () => {
+ const CODE = "code-0123456789";
+ const CALLBACK = `https://kotiko.org/connect/?code=${CODE}`;
+ // The return page's content script, as the background sees it.
+ const RETURN_PAGE = { id: EXT_ID, url: CALLBACK, tab: { id: 9, url: CALLBACK } };
+
+ test("opens OpenRouter's sign-in, waits, and collapses to Connected when the return page hands the code over", async () => {
+ const exchanged = [];
+ const p = await openWelcome({
+ exchange: (init) => {
+ exchanged.push(JSON.parse(init.body));
+ return new Response(JSON.stringify({ key: KEY }), { status: 200, headers: { "Content-Type": "application/json" } });
+ },
+ });
+ p.click("#aiConnect");
+ await p.until(() => p.$("#connectStatus.status-busy"));
+ assert.equal(p.text("#connectStatus"), "Waiting for OpenRouter… Finish signing in on the other tab.");
+ assert.equal(p.$("#aiConnect").getAttribute("aria-describedby"), "connectStatus");
+ assert.ok(p.visible("#aiSetup"), "the other ways to connect stay available while waiting");
+ assert.ok(p.visible("#aiPaste"));
+ const pending = JSON.parse(await (await p.bg.__kotiko.getStore()).secrets.get("pkce:pending"));
+ assert.match(pending.verifier, /^[A-Za-z0-9_-]{43}$/);
+ assert.deepEqual(p.requests, [], "starting the sign-in sends nothing; the tab goes to OpenRouter");
+
+ // OpenRouter sends the browser back to kotiko.org/connect/ with a code.
+ const res = await p.fake.deliver({ type: "oauth.code", code: CODE }, RETURN_PAGE);
+ assert.deepEqual(plain(res), { ok: true });
+ assert.deepEqual(exchanged, [{ code: CODE, code_verifier: pending.verifier, code_challenge_method: "S256" }]);
+ await p.until(() => p.visible("#aiConnected"));
+ assert.equal(p.text("#aiConnectedText"), "Connected to OpenRouter, free models.");
+ assert.ok(p.$$("#log p").some((n) => n.textContent === "Connected to OpenRouter, free models."));
+ assert.equal(p.store.lookup.provider, "openrouter");
+ assert.ok(!JSON.stringify([p.store, p.sync]).includes(KEY), "the key is in no storage area");
+ });
+
+ test("a sign-in that fails leaves the step open with every other way to connect", async () => {
+ const p = await openWelcome({ exchange: () => new Response("{}", { status: 400 }) });
+ p.click("#aiConnect");
+ await p.until(() => p.$("#connectStatus.status-busy"));
+ const res = await p.fake.deliver({ type: "oauth.code", code: CODE }, RETURN_PAGE);
+ assert.equal(res.code, "key_rejected");
+ await p.fake.idle();
+ assert.ok(p.visible("#aiSetup"));
+ assert.ok(!p.visible("#aiConnected"));
+ // Selecting it again starts a new sign-in.
+ p.click("#aiConnect");
+ await p.until(async () => (await (await p.bg.__kotiko.getStore()).secrets.get("pkce:pending")) !== null);
+ });
+
+ test("Change goes back to the step with Connect OpenRouter focused", async () => {
+ const q = await openWelcome({ network: true, local: { lookup: { kind: "provider", provider: "custom", baseUrl: srv.llmUrl }, keys: { server: false, providers: { custom: true } }, words: [{ id: "1", lang: "ru", native: "дом", base_lang: "en", gloss: "house", forms: ["house"] }] } });
+ assert.ok(q.visible("#aiConnected"));
+ q.click("#aiChange");
+ assert.ok(q.visible("#aiConnect"));
+ assert.equal(q.doc.activeElement, q.$("#aiConnect"));
+ });
+});
+
describe("skip, reopen, edit (22 §8 to §10)", () => {
test("Skip for now finishes the first run and closes the tab", async () => {
const p = await openWelcome();
diff --git a/test/e2e/connect.spec.mjs b/test/e2e/connect.spec.mjs
index 0bf942f..3d75b21 100644
--- a/test/e2e/connect.spec.mjs
+++ b/test/e2e/connect.spec.mjs
@@ -3,21 +3,28 @@
// "Connect OpenRouter" (slice 11 §4) with the docs site's return page (slice 44): Kotiko's
// content script for https://kotiko.org/connect/ hands `?code=` to the background, which
-// trades it for a key, and the page's status line says how it went. kotiko.org is served
-// here by Playwright (a stand-in with the real page's status line); OpenRouter's key
-// exchange is stubbed inside the service worker, so nothing leaves the machine.
+// trades it for a key, and the page's status line says how it went. The sign-in starts from
+// the buttons learners see: the dashboard's Word lookups and the welcome tab. kotiko.org and
+// OpenRouter's sign-in page are served here by Playwright (stand-ins; the return page keeps
+// the real one's status line and CSP); OpenRouter's key exchange is stubbed inside the
+// service worker, so nothing leaves the machine.
import { test, expect } from "./fixtures.mjs";
const CALLBACK = "https://kotiko.org/connect/";
-const PAGE = `Connecting
+// The live page's own CSP (no script at all) is kept: Kotiko's content script runs in its
+// own world and isn't bound by it.
+const PAGE = `Connecting
Connecting Kotiko to OpenRouter
If Kotiko is installed in this browser, it is finishing your sign-in now.
OpenRouter Sign in `;
+
+// Serves the stand-in for kotiko.org and example.org, and for OpenRouter's sign-in page;
+// those requests are expected, so they're taken out of the "left localhost" list at the end.
async function serveSite(context, blocked) {
await context.route(/^https:\/\/(kotiko|example)\.org\//, (route) => route.fulfill({ status: 200, contentType: "text/html", body: PAGE }));
+ await context.route(/^https:\/\/openrouter\.ai\/auth\?/, (route) => route.fulfill({ status: 200, contentType: "text/html", body: SIGN_IN }));
return () => {
for (let i = blocked.length - 1; i >= 0; i--) if (/^https:\/\/(kotiko\.org|example\.org|openrouter\.ai\/auth)/.test(blocked[i])) blocked.splice(i, 1);
};
@@ -25,10 +32,9 @@ async function serveSite(context, blocked) {
const status = (page) => page.locator("#kotiko-connect-status");
-test("the return page hands the code to Kotiko, which saves the key and says so", async ({ context, serviceWorker, extensionId, blocked }) => {
- const done = await serveSite(context, blocked);
- // OpenRouter's key exchange, answered inside the service worker; it records what it got.
- // The worker's own requests can't be routed by Playwright, so its fetch is replaced.
+// OpenRouter's key exchange, answered inside the service worker; it records what it got.
+// The worker's own requests can't be routed by Playwright, so its fetch is replaced.
+async function stubExchange(serviceWorker) {
await serviceWorker.evaluate(() => {
const real = globalThis.fetch;
globalThis.__exchanges = [];
@@ -45,16 +51,40 @@ test("the return page hands the code to Kotiko, which saves the key and says so"
return real(url, init);
};
});
+}
+
+// Selects a "Connect OpenRouter" button and returns OpenRouter's sign-in tab it opened.
+async function signInTab(context, button) {
+ const isSignIn = (p) => p.url().startsWith("https://openrouter.ai/auth?");
+ await button.click();
+ // The tab opens on about:blank and then loads OpenRouter's address.
+ await expect.poll(() => context.pages().some(isSignIn)).toBe(true);
+ const tab = context.pages().find(isSignIn);
+ const auth = new URL(tab.url());
+ expect(auth.searchParams.get("callback_url")).toBe(CALLBACK);
+ expect(auth.searchParams.get("code_challenge_method")).toBe("S256");
+ expect(auth.searchParams.get("code_challenge")).toMatch(/^[A-Za-z0-9_-]{43}$/);
+ expect(auth.searchParams.get("key_label")).toBe("Kotiko");
+ return tab;
+}
+
+test("the return page hands the code to Kotiko, which saves the key and says so", async ({ context, serviceWorker, extensionId, blocked }) => {
+ const done = await serveSite(context, blocked);
+ await stubExchange(serviceWorker);
- // "Connect OpenRouter" from an extension page: the background keeps a verifier and opens
- // OpenRouter's sign-in, whose callback is the docs site's page.
+ // The settings' "Connect OpenRouter" button: the background keeps a verifier and opens
+ // OpenRouter's sign-in in a new tab, whose callback is the docs site's page.
const ext = await context.newPage();
- await ext.goto(`chrome-extension://${extensionId}/privacy.html`);
- const start = await ext.evaluate(() => chrome.runtime.sendMessage({ type: "oauth.start" }));
- expect(new URL(start.url).searchParams.get("callback_url")).toBe(CALLBACK);
+ await ext.goto(`chrome-extension://${extensionId}/dashboard.html#settings/lookups`);
+ const connect = ext.locator("#connectOpenRouter");
+ if (!(await connect.isVisible())) await ext.locator("#providerOptions [role=radio]").first().click();
+ await expect(connect).toBeVisible();
+ await expect(connect).toHaveText("Connect OpenRouter");
+ const tab = await signInTab(context, connect);
+ await expect(ext.locator("#lookupState")).toHaveText("Waiting for OpenRouter… Finish signing in on the other tab.");
- // OpenRouter sends the browser back with a code.
- const page = await context.newPage();
+ // OpenRouter sends the browser back with a code, in the same tab.
+ const page = tab;
await page.goto(`${CALLBACK}?code=test-code-0123456789`);
await expect(status(page)).toHaveText("Connected. Kotiko now looks words up with OpenRouter's free models. You can close this tab.");
// The code is gone from the address, so a reload doesn't send it again.
@@ -70,6 +100,25 @@ test("the return page hands the code to Kotiko, which saves the key and says so"
expect(Object.keys(secrets)).toContain("provider:openrouter");
const { lookup } = await serviceWorker.evaluate(() => chrome.storage.local.get("lookup"));
expect(lookup).toMatchObject({ kind: "provider", provider: "openrouter" });
+ // The settings tab, still open, shows the key that arrived.
+ await expect(ext.locator("#lookupKeyMasked")).toHaveText(/^Saved key: sk-or-…/);
+ await expect(ext.locator("#oauthRow")).toBeHidden();
+ done();
+});
+
+test("the welcome tab's Connect OpenRouter (free) waits for the sign-in, then says Connected", async ({ context, serviceWorker, extensionId, blocked }) => {
+ const done = await serveSite(context, blocked);
+ await stubExchange(serviceWorker);
+ const welcome = await context.newPage();
+ await welcome.goto(`chrome-extension://${extensionId}/welcome.html`);
+ const connect = welcome.locator("#aiConnect");
+ await expect(connect).toBeVisible();
+ await expect(connect).toHaveText("Connect OpenRouter (free)");
+ const tab = await signInTab(context, connect);
+ await expect(welcome.locator("#connectStatus")).toHaveText("Waiting for OpenRouter… Finish signing in on the other tab.");
+ await tab.goto(`${CALLBACK}?code=welcome-code-0123456789`);
+ await expect(status(tab)).toHaveText(/^Connected\./);
+ await expect(welcome.locator("#aiConnectedText")).toHaveText("Connected to OpenRouter, free models.");
done();
});
diff --git a/test/visual/store-screenshots.mjs b/test/visual/store-screenshots.mjs
index 0c67d43..fd67fb2 100644
--- a/test/visual/store-screenshots.mjs
+++ b/test/visual/store-screenshots.mjs
@@ -11,7 +11,7 @@
// //-.png (captioned, the files to upload). Default outDir:
// ./store-shots; default locale: en. Chromium with the unpacked extension, the browser in
// that locale, and a page written for the purpose (test/fixtures/pages/store-article.html,
-// so no third-party content or logos appear). The caption's colors come from the design
+// so no third-party content or logos appear), served at www.example.com by a route. The caption's colors come from the design
// tokens, and the script stops if their contrast is under 4.5:1. KOTIKO_E2E_CHROMIUM picks
// another Chromium build.
//
@@ -30,6 +30,10 @@ const EXT_DIR = path.join(ROOT, "extension");
const OUT = path.resolve(process.argv[2] ?? "store-shots");
const LOCALE = process.argv[3] ?? "en";
const SIZE = { width: 1280, height: 800 };
+// The article is served at an ordinary-looking address (example.com is reserved for
+// examples, RFC 2606) so the popup's "This page" line names a website, not 127.0.0.1. The
+// browser never reaches the internet: the route below answers with the fixture file.
+const ARTICLE_URL = "https://www.example.com/articles/store-article.html";
const WORDS = {
en: [
@@ -87,6 +91,8 @@ async function launch() {
if (["http:", "https:"].includes(u.protocol) && !["127.0.0.1", "localhost"].includes(u.hostname)) return route.abort();
return route.continue();
});
+ const articleHtml = await fs.readFile(path.join(ROOT, "test/fixtures/pages/store-article.html"), "utf8");
+ await context.route(ARTICLE_URL, (route) => route.fulfill({ status: 200, contentType: "text/html; charset=utf-8", body: articleHtml }));
const sw = context.serviceWorkers()[0] ?? (await context.waitForEvent("serviceworker"));
return { context, sw, base: `chrome-extension://${new URL(sw.url()).host}/`, userDataDir };
}
@@ -111,10 +117,10 @@ async function seed(env, srv) {
await new Promise((r) => setTimeout(r, 500));
}
-async function article(env, srv, scheme, hover) {
+async function article(env, scheme, hover) {
const page = await env.context.newPage();
await page.emulateMedia({ colorScheme: scheme, reducedMotion: "reduce" });
- await page.goto(srv.pageUrl("store-article.html"));
+ await page.goto(ARTICLE_URL);
await page.locator("kotiko-w").first().waitFor();
const shown = await page.locator("kotiko-w").allTextContents();
const pick = hover.find((w) => shown.includes(w));
@@ -127,20 +133,36 @@ async function article(env, srv, scheme, hover) {
}
const shots = [
- { id: "page", take: (env, srv) => article(env, srv, "light", HOVER[LOCALE].light) },
+ { id: "page", take: (env) => article(env, "light", HOVER[LOCALE].light) },
{
id: "popup",
+ // A real popup describes the tab it was opened over. Here it is a tab of its own, so the
+ // article is opened first and the popup's "active tab" question answered with that real
+ // tab (its id and address): "This page" then describes the article, not a browser page.
async take(env) {
+ const article = await env.context.newPage();
+ await article.emulateMedia({ colorScheme: "light", reducedMotion: "reduce" });
+ await article.goto(ARTICLE_URL);
+ await article.locator("kotiko-w").first().waitFor();
+ const tab = await env.sw.evaluate(async (url) => (await chrome.tabs.query({ url })).map(({ id, url: u, title, windowId }) => ({ id, url: u, title, active: true, windowId }))[0] ?? null, article.url());
+ if (!tab) throw new Error("The article's tab wasn't found");
const page = await env.context.newPage();
await page.setViewportSize({ width: 380, height: 600 });
await page.emulateMedia({ colorScheme: "light", reducedMotion: "reduce" });
+ await page.addInitScript((t) => {
+ if (!globalThis.chrome?.tabs?.query) return;
+ const query = chrome.tabs.query.bind(chrome.tabs);
+ chrome.tabs.query = (info = {}, ...rest) => (info.active ? Promise.resolve([t]) : query(info, ...rest));
+ }, tab);
await page.goto(`${env.base}popup.html`);
await page.locator('#main[data-ready="true"]').waitFor();
+ if (await page.locator("#unsupported").isVisible()) throw new Error("The popup describes a browser page, not the article");
+ await page.locator("#pageSection").waitFor();
await page.locator("#addText").fill(ADD[LOCALE]);
await page.locator("#addText").press("Enter");
await page.locator('#jobs [data-kind="word"]').first().waitFor();
await page.locator("#addText").blur();
- return { page, region: page.locator("#main") };
+ return { page, region: page.locator("#main"), also: [article] };
},
},
{
@@ -149,6 +171,11 @@ const shots = [
const page = await env.context.newPage();
await page.emulateMedia({ colorScheme: "light", reducedMotion: "reduce" });
await page.goto(`${env.base}dashboard.html`);
+ // The word added in the popup gets its pronunciation in the background (slice 07 §8),
+ // which shows "Adding pronunciations…: 0 of 1" until its next run (about a minute);
+ // the shot waits for that line to go rather than show it.
+ await page.waitForTimeout(1500);
+ await page.locator("#refreshLine").waitFor({ state: "hidden", timeout: 120_000 });
await page.waitForTimeout(800);
return page;
},
@@ -160,11 +187,19 @@ const shots = [
await page.emulateMedia({ colorScheme: "light", reducedMotion: "reduce" });
await page.goto(`${env.base}welcome.html`);
await page.locator('#main[data-ready="true"]').waitFor();
+ // Shown as most learners will see it: connected to OpenRouter, the default, rather than
+ // the fixture's "Another service". Only the label changes; nothing is looked up.
+ for (const msg of [{ type: "secrets.set", id: "provider:openrouter", value: "sk-or-v1-0123456789abcdef0123456789abcdef" }, { type: "backend.set", lookup: { kind: "provider", provider: "openrouter", baseUrl: null, model: null } }]) {
+ const r = await page.evaluate((m) => chrome.runtime.sendMessage(m), msg);
+ if (r?.error) throw new Error(`${msg.type}: ${JSON.stringify(r)}`);
+ }
+ await page.reload();
+ await page.locator('#main[data-ready="true"]').waitFor();
await page.waitForTimeout(300);
return page;
},
},
- { id: "dark", take: (env, srv) => article(env, srv, "dark", HOVER[LOCALE].dark) },
+ { id: "dark", take: (env) => article(env, "dark", HOVER[LOCALE].dark) },
];
// The captioned 1280x800 frame: the caption on the canvas color, the capture below it.
@@ -202,6 +237,7 @@ async function run() {
if (got.region) await got.region.screenshot({ path: raw });
else await page.screenshot({ path: raw });
await page.close();
+ for (const p of got.also ?? []) await p.close();
const frame = await env.context.newPage();
await frame.setViewportSize(SIZE);