Update screenshots to current evcc version

screenshot-generator/recipes/battery.spec.js

@@ -14,7 +14,7 @@ const { start, stop } = require("./utils/evcc");
 const BASE_PATH = "features/screenshots";
 
 test.beforeEach(async () => {
-  await start("basics.evcc.yaml");
+  await start("basics.evcc.yaml", "password.sql");
 });
 test.afterEach(async () => {
   await stop();
@@ -80,9 +80,9 @@ loop((screenshot) => {
     await removeOverlays(page);
 
     // buffer start
-    await page.locator("#bufferStartSelect").selectOption("90");
+    await page.locator("#batterySettingsBufferStart").selectOption("90");
     await wait(300);
-    await placeOverlay(page, "#bufferStartSelect", CURSOR, 0, 10);
+    await placeOverlay(page, "#batterySettingsBufferStart", CURSOR, 0, 10);
     await placeOverlay(page, ".bufferStartIndicator", FOUR, -100, -21);
 
     await screenshot(

screenshot-generator/recipes/charging-sessions.spec.js

@@ -6,7 +6,10 @@ const { start, stop } = require("./utils/evcc");
 const BASE_PATH = "features/screenshots";
 
 test.beforeAll(async () => {
-  await start("sessions.yaml", "sessions.sql");
+  await start("charging-sessions.yaml", [
+    "charging-sessions.sql",
+    "password.sql",
+  ]);
 });
 test.afterAll(async () => {
   await stop();
@@ -34,7 +37,7 @@ loop((screenshot) => {
   });
 
   test("session", async ({ page }) => {
-    await page.goto(`/#/sessions`);
+    await page.goto(`/#/sessions?year=2024&month=3`);
     await expect(
       await page.getByTestId("sessions-entry").first(),
     ).toBeVisible();

screenshot-generator/recipes/co2.spec.js

@@ -6,7 +6,7 @@ const { start, stop } = require("./utils/evcc");
 const BASE_PATH = "features/screenshots";
 
 test.beforeAll(async () => {
-  await start(["basics.evcc.yaml", "co2.evcc.yaml"]);
+  await start(["basics.evcc.yaml", "co2.evcc.yaml"], "password.sql");
 });
 test.afterAll(async () => {
   await stop();

screenshot-generator/recipes/dynamicprice.spec.js

@@ -6,7 +6,7 @@ const { start, stop } = require("./utils/evcc");
 const BASE_PATH = "features/screenshots";
 
 test.beforeAll(async () => {
-  await start(["basics.evcc.yaml", "dynamicprice.evcc.yaml"]);
+  await start(["basics.evcc.yaml", "dynamicprice.evcc.yaml"], "password.sql");
 });
 test.afterAll(async () => {
   await stop();

screenshot-generator/recipes/limits.spec.js

@@ -6,7 +6,7 @@ const { start, stop } = require("./utils/evcc");
 const BASE_PATH = "features/screenshots";
 
 test.beforeEach(async () => {
-  await start("vehicles.evcc.yaml");
+  await start("vehicles.evcc.yaml", "password.sql");
 });
 test.afterEach(async () => {
   await stop();
@@ -16,12 +16,12 @@ loop((screenshot) => {
   test("min soc / limit soc / limit energy", async ({ page }) => {
     await page.goto(`/`);
 
-    await expect(
-      page.getByRole("button", { name: "blue IONIQ 6" }),
-    ).toBeVisible();
-    await expect(
-      page.getByRole("button", { name: "white Model 3" }),
-    ).toBeVisible();
+    await expect(page.getByTestId("vehicle-name").first()).toHaveText(
+      "blue IONIQ 6",
+    );
+    await expect(page.getByTestId("vehicle-name").last()).toHaveText(
+      "white Model 3",
+    );
 
     await page.locator("[data-testid=charging-plan] button").first().click();
     await page
@@ -39,7 +39,7 @@ loop((screenshot) => {
       },
     );
     await removeOverlays(page);
-    await page.locator("#chargingPlanModal_1 [aria-label=Close]").click();
+    await page.getByRole("button", { name: "Close" }).click();
     await expect(page.locator("#chargingPlanModal_1")).not.toBeVisible();
     await screenshot(
       page,
@@ -66,7 +66,7 @@ loop((screenshot) => {
       },
     );
     await removeOverlays(page);
-    await page.locator("#chargingPlanModal_2 [aria-label=Close]").click();
+    await page.getByRole("button", { name: "Close" }).click();
     await expect(page.locator("#chargingPlanModal_2")).not.toBeVisible();
     await page
       .getByTestId("limit-soc")
@@ -90,11 +90,12 @@ loop((screenshot) => {
     );
 
     // limit energy
-    await page.getByRole("button", { name: "white Model 3" }).click();
-    await page.getByRole("button", { name: "red Fiat 500e" }).click();
-    await expect(
-      page.getByRole("button", { name: "red Fiat 500e" }),
-    ).toBeVisible();
+    await page
+      .locator("#vehicleOptionsDropdown2")
+      .selectOption("red Fiat 500e");
+    await expect(page.getByTestId("vehicle-name").last()).toHaveText(
+      "red Fiat 500e",
+    );
     await page
       .getByTestId("limit-energy")
       .locator("select")

screenshot-generator/recipes/password.sql

@@ -0,0 +1,8 @@
+CREATE TABLE IF NOT EXISTS `settings` (
+    `key` text
+  , `value` text
+  , PRIMARY KEY(`key`)
+);
+
+-- password: secret
+INSERT INTO settings("key", value) VALUES('adminPassword', '$2a$10$HNLoqiTO5oLwopczA/wcPOebfO79S.hnAA5HOkx5p6o3g5a2E30v2');

screenshot-generator/recipes/plan.spec.js

@@ -6,7 +6,7 @@ const { start, stop } = require("./utils/evcc");
 const BASE_PATH = "features/screenshots";
 
 test.beforeEach(async () => {
-  await start(["vehicles.evcc.yaml", "dynamicprice.evcc.yaml"]);
+  await start(["vehicles.evcc.yaml", "dynamicprice.evcc.yaml"], "password.sql");
 });
 test.afterEach(async () => {
   await stop();
@@ -35,8 +35,9 @@ loop((screenshot) => {
   test("charging plan energy", async ({ page }) => {
     await page.goto(`/`);
 
-    await page.getByRole("button", { name: "blue IONIQ 6" }).click();
-    await page.getByRole("button", { name: "red Fiat 500e" }).click();
+    await page
+      .locator("#vehicleOptionsDropdown1")
+      .selectOption("red Fiat 500e");
 
     await page.locator("[data-testid=charging-plan] button").first().click();
     await wait(300);

screenshot-generator/recipes/solar-surplus-charging.spec.js

@@ -6,7 +6,7 @@ const { start, stop } = require("./utils/evcc");
 const BASE_PATH = "features/screenshots";
 
 test.beforeAll(async () => {
-  await start("basics.evcc.yaml");
+  await start("basics.evcc.yaml", "password.sql");
 });
 test.afterAll(async () => {
   await stop();

screenshot-generator/recipes/utils/evcc.js

@@ -10,10 +10,12 @@ const BASE_URL = playwrightConfig.use.baseURL;
 const DB_PATH = "./evcc.db";
 const BINARY = "./evcc";
 
-export async function start(config, database) {
+const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+export async function start(config, sqlDumps) {
   await _clean();
-  if (database) {
-    await _restoreDatabase(database);
+  if (sqlDumps) {
+    await _restoreDatabase(sqlDumps);
   }
   await _start(config);
 }
@@ -34,35 +36,44 @@ export async function cleanRestart(config) {
   await _start(config);
 }
 
-async function _restoreDatabase(database) {
-  console.log("loading database", { database });
-  execSync(`sqlite3 ${DB_PATH} < recipes/${database}`);
+async function _restoreDatabase(sqlDumps) {
+  const dumps = Array.isArray(sqlDumps) ? sqlDumps : [sqlDumps];
+  for (const dump of dumps) {
+    console.log("loading database", dump);
+    execSync(`sqlite3 ${DB_PATH} < recipes/${dump}`, {
+      encoding: "utf-8",
+      stdio: ["pipe", "pipe", "ignore"],
+    });
+  }
 }
 
+let instance = null;
+
 async function _start(config) {
   const configPath =
     typeof config === "string"
       ? `recipes/${config}`
       : mergeYaml(`recipes/${config[0]}`, `recipes/${config[1]}`);
 
   console.log("starting evcc", { config });
-  const instance = exec(
+  instance = exec(
     `EVCC_DATABASE_DSN=${DB_PATH} ${BINARY} --config ${configPath}`,
   );
   instance.stdout.pipe(process.stdout);
   instance.stderr.pipe(process.stderr);
   instance.on("exit", (code) => {
     if (code !== 0) {
-      throw new Error("evcc terminated", code);
+      console.log("evcc terminated");
     }
   });
   await waitOn({ resources: [BASE_URL] });
 }
 
 async function _stop() {
   console.log("shutting down evcc");
-  await axios.post(BASE_URL + "/api/shutdown");
+  instance.kill("SIGKILL");
   await waitOn({ resources: [BASE_URL], reverse: true });
+  await sleep(300);
 }
 
 async function _clean() {

screenshot-generator/recipes/utils/loop.js

@@ -7,18 +7,22 @@ const screenshotBase = {
   en: "../i18n/en/docusaurus-plugin-content-docs/current",
 };
 
+const sleep = async function (ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+};
+
 async function convertToWebp(pngPath) {
-  const webpPath1x = pngPath.replace(/\.png$/, "-1x.webp");
-  await sharp(pngPath)
-    .metadata()
-    .then(({ width }) =>
-      sharp(pngPath)
-        .resize(Math.round(width * 0.5))
-        .toFile(webpPath1x),
-    );
+  try {
+    const webpPath1x = pngPath.replace(/\.png$/, "-1x.webp");
+    const meta = await sharp(pngPath).metadata();
+    const halfWidth = Math.round(meta.width * 0.5);
+    await sharp(pngPath).resize(halfWidth).toFile(webpPath1x);
 
-  const webpPath2x = pngPath.replace(/\.png$/, "-2x.webp");
-  await sharp(pngPath).toFormat("webp").toFile(webpPath2x);
+    const webpPath2x = pngPath.replace(/\.png$/, "-2x.webp");
+    await sharp(pngPath).toFormat("webp").toFile(webpPath2x);
+  } catch (e) {
+    console.error("Error converting to webp", e);
+  }
 }
 
 export function loop(body) {

screenshot-generator/recipes/vehicles.spec.js

@@ -6,7 +6,7 @@ const { start, stop } = require("./utils/evcc");
 const BASE_PATH = "features/screenshots";
 
 test.beforeEach(async () => {
-  await start("vehicles.evcc.yaml");
+  await start("vehicles.evcc.yaml", "password.sql");
 });
 test.afterEach(async () => {
   await stop();
@@ -17,13 +17,7 @@ loop((screenshot) => {
     await page.goto(`/`);
 
     await page.getByRole("button", { name: "blue IONIQ 6" }).click();
-    await placeOverlay(
-      page,
-      "[aria-labelledby=vehicleOptionsDropdown1] li:nth-child(2)",
-      CURSOR,
-      50,
-      -5,
-    );
+    await placeOverlay(page, "[data-testid='vehicle-name']", CURSOR, 50, -5);
     await screenshot(
       page,
       `${BASE_PATH}/vehicle-select`,