README.md

Can We

A collection of websites focused on browsers usage and features.

I’d like to propose a SuperCanSomething website

Open an issue or (faster) a pull request.

Development

Content

Old good public/index.html editing.

Styles

• npm install
• (optional) create .env from .env.example, then edit it
• (local) npm run dev or (prod) npm run build

Websites colors are CSS custom properties in /src/css/config/sites.css.

Note

Thou plain CSS is used in this project, you can write inline CSS comments using // thanks to the PostCSS config.

Tests

Tests use Playwright and can be run with npm test. They can all run locally or in a GitHub action.

Before running tests locally:

• make sure the project is accessible from a URL (e.g. using npm run preview);
• add this URL in the PW_BASE_URL entry of your .env;
• npx playwright install pulls the headless browsers used by the test.

You can also play with Playwright GUI by running npm run test:ui.

URLs are tested on merge requests using Lychee in a GitHub Action. To test URLs locally install Lychee and run npm run test:absolute-links.

Local tests results

When running the tests locally, the results are in /tests/results:

• {tld}-{timestamp}.json: JSON report of the test suites;
• html/index.html: HTML report of the latest test suites;
• axe-html/{tld}-{timestamp}-{wcag2-a|wcag2-aa|others}.html: HTML reports of the accessibility tests, split by category (WCAG 2 A, WCAG 2 AA, others);

GitHub Action tests results

When running in a GitHub action, the “summary” view of the GitHub Action has an artifact section at the very bottom. The artifact archive contains the same HTML report as in html/index.html when you run tests locally.

When you open it and pick one of the accessibility tests, look into the “attachment” to find the HTML report dedicated to accessibility issues (as well as a JSON file).

Various

Last deployment: