Skip to content

Commit c12201a

Browse files
committed
docs(readme): updated the readme
1 parent c4e8831 commit c12201a

File tree

1 file changed

+83
-49
lines changed

1 file changed

+83
-49
lines changed

README.md

Lines changed: 83 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,56 @@
1-
# Serenity/JS Playwright Component Test Template
1+
# Serenity/JS Playwright Component Test Template for Web Components
22

3-
[![Build Status](https://github.com/serenity-js/serenity-js-playwright-ct-web-components-template/actions/workflows/main.yml/badge.svg?branch=main)](https://github.com/serenity-js/serenity-js-playwright-ct-web-components-template/actions/workflows/main.yml)
4-
[![Serenity/JS on GitHub](https://img.shields.io/badge/github-serenity--js-yellow?logo=github)](https://github.com/serenity-js/serenity-js)
5-
[![Serenity/JS on StackOverflow](https://img.shields.io/badge/stackoverflow-serenity--js-important?logo=stackoverflow)](https://stackoverflow.com/questions/tagged/serenity-js)
6-
[![Contribute with Gitpod](https://img.shields.io/badge/Contribute%20with-Gitpod-908a85?logo=gitpod)](https://gitpod.io/from-referrer/)
3+
[![Build Status](https://github.com/serenity-js/serenity-js-playwright-ct-web-components-template/actions/workflows/main.yml/badge.svg)](https://github.com/serenity-js/serenity-js-playwright-ct-web-components-template/actions/workflows/main.yml)
74

8-
[![Follow Serenity/JS on LinkedIn](https://img.shields.io/badge/Follow-Serenity%2FJS%20-0077B5?logo=linkedin)](https://www.linkedin.com/company/serenity-js)
9-
[![Watch Serenity/JS on YouTube](https://img.shields.io/badge/Watch-@serenity--js-E62117?logo=youtube)](https://www.youtube.com/@serenity-js)
10-
[![Join Serenity/JS Community Chat](https://img.shields.io/badge/Chat-Serenity%2FJS%20Community-FBD30B?logo=matrix)](https://matrix.to/#/#serenity-js:gitter.im)
11-
[![Support Serenity/JS on GitHub](https://img.shields.io/badge/Support-@serenity--js-703EC8?logo=github)](https://github.com/sponsors/serenity-js)
12-
13-
Use this [template repository](https://help.github.com/en/articles/creating-a-repository-from-a-template)
14-
to get started with testing your [Lit](https://lit.dev/) or native [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
15-
using [Serenity/JS](https://serenity-js.org), [Playwright](https://playwright.dev/), [Playwright Component Test](https://playwright.dev/docs/test-components)
16-
and [Playwright CT Web](https://github.com/sand4rt/playwright-ct-web).
5+
This [template](https://help.github.com/en/articles/creating-a-repository-from-a-template) helps you test
6+
[Lit](https://lit.dev/) and native [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
7+
using [Serenity/JS](https://serenity-js.org) and the [Playwright Test](https://playwright.dev/) runner with [Playwright CT Web](https://github.com/sand4rt/playwright-ct-web),
8+
with a fully configured TypeScript setup.
179

18-
Learn more:
19-
- [Serenity BDD reports for this project](https://serenity-js.github.io/serenity-js-playwright-ct-web-components-template/serenity/)
20-
- [Playwright Test reports for this project](https://serenity-js.github.io/serenity-js-playwright-ct-web-components-template/playwright/)
21-
- [Serenity/JS website, tutorials, and API docs](https://serenity-js.org/)
10+
## Features
2211

23-
## Usage
12+
- Preconfigured Serenity/JS + Playwright CT + TypeScript setup
13+
- Example Web Components and corresponding tests
14+
- Linting and CI-friendly scripts
15+
- Ready-to-use GitHub Codespaces environment using the official [Serenity/JS Docker image](https://serenity-js.org/handbook/integration/docker/) for quick exploration
16+
- Integrated reporting via Serenity BDD and Playwright, with live examples:
17+
- [Serenity BDD report](https://serenity-js.github.io/serenity-js-playwright-ct-web-components-template/serenity/)
18+
- [Playwright Test report](https://serenity-js.github.io/serenity-js-playwright-ct-web-components-template/playwright/)
2419

25-
This repository is a GitHub template. You can use it to [create a new GitHub repository](https://help.github.com/en/articles/creating-a-repository-from-a-template), [clone it to your computer](https://docs.github.com/en/free-pro-team@latest/github/creating-cloning-and-archiving-repositories/cloning-a-repository).
20+
## Quick Start
2621

27-
You can also launch it in a virtual Gitpod workspace without having to install anything on your machine:
22+
### Explore instantly in GitHub Codespaces
2823

29-
[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/from-referrer/)
24+
Launch this project in an online development environment:
3025

31-
### Installation
26+
[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://github.com/codespaces/new?ref=main&repo=serenity-js/serenity-js-playwright-ct-web-components-template)
3227

33-
To use this project on your machine, you'll need:
34-
- Node.js, a Long-Term Support (LTS) release version 16 or later - [download](https://nodejs.org/en/)
35-
- Java Runtime Environment (JRE) or a Java Development Kit (JDK) version 11 or later - [download](https://adoptopenjdk.net/)
28+
### Run locally
3629

37-
Follow the [installation instructions](https://serenity-js.org/handbook/about/installation/) to help you verify your setup.
38-
39-
Once you have the code on your computer, use your computer terminal to run the following command in the directory where you've cloned the project:
30+
- Follow the [Serenity/JS installation guide](https://serenity-js.org/handbook/about/installation/)
31+
- [Create a new repository](https://help.github.com/en/articles/creating-a-repository-from-a-template) from this template
32+
- [Clone](https://help.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository) it to your machine
33+
- Install dependencies:
4034
```
4135
npm ci
4236
```
43-
44-
Running [`npm ci`](https://docs.npmjs.com/cli/v6/commands/npm-ci) downloads the [Node modules](https://docs.npmjs.com/about-packages-and-modules) this project depends on, as well as the [Serenity BDD CLI](https://github.com/serenity-bdd/serenity-cli) reporter jar.
37+
- Run the example tests
38+
```
39+
npm test
40+
```
41+
- View the generated reports:
42+
- **Serenity BDD**: `./target/site/serenity/index.html`
43+
- **Playwright Test**; `./playwright-report/index.html`
44+
- Serve the Serenity BDD report locally:
45+
```
46+
npm run start
47+
```
48+
Then open [http://localhost:8080](http://localhost:8080) in your browser.
4549

4650
### Corporate networks
4751

48-
If your network administrators require you to use proxy servers or an internal artifact registry (Artifactory, Nexus, etc.), your development environment might require some additional configuration.
49-
50-
The easiest way to do it is to create an [`.npmrc` file](https://docs.npmjs.com/cli/v6/configuring-npm/npmrc) in your home directory:
52+
If your environment requires proxy configuration or an internal registry like Artifactory or Nexus, add an [`.npmrc` file](https://docs.npmjs.com/cli/v6/configuring-npm/npmrc) file
53+
with the appropriate configuration to your home directory:
5154

5255
```
5356
proxy=http://user:[email protected]:8080/
@@ -56,9 +59,7 @@ strict-ssl=false
5659
registry=https://artifactory.mycompany.com/artifactory/
5760
```
5861

59-
If you encounter issues downloading the Serenity BDD CLI jar, please follow the [detailed instructions in the Serenity/JS Handbook](https://serenity-js.org/api/serenity-bdd/#downloading-the-serenity-bdd-reporting-cli).
60-
61-
### Execution
62+
## Execution
6263

6364
The project provides several [NPM scripts](https://docs.npmjs.com/cli/v6/using-npm/scripts) defined in [`package.json`](package.json):
6465

@@ -72,25 +73,58 @@ npm start # starts a mini HTTP server and serves the test reports
7273
# at http://localhost:8080
7374
```
7475

75-
## Your feedback matters!
76+
## Next steps
77+
78+
- Replace the sample components with your own UI elements
79+
- Add new tasks, interactions, and assertions using Serenity/JS
80+
- Extend the test suite or integrate it into CI/CD pipelines
81+
- Use the sample reports to understand expected testing and reporting workflows
7682

77-
Do you find Serenity/JS useful? Give it a ⭐ star on GitHub!
83+
## Documentation
7884

79-
[![GitHub stars](https://img.shields.io/github/stars/serenity-js/serenity-js)](https://github.com/serenity-js/serenity-js)
85+
- [API Reference](https://serenity-js.org/api/)
86+
- [Screenplay Pattern Guide](https://serenity-js.org/handbook/design/screenplay-pattern/)
87+
- [Serenity/JS Project Templates](https://serenity-js.org/handbook/project-templates/)
88+
- [More examples and reference implementations](https://github.com/serenity-js/serenity-js/tree/main/examples)
89+
- [Tutorial: First Web Scenario](https://serenity-js.org/handbook/tutorials/your-first-web-scenario/)
90+
- [Tutorial: First API Scenario](https://serenity-js.org/handbook/tutorials/your-first-api-scenario/)
8091

81-
Found a bug? Need a feature? Raise [an issue](https://github.com/serenity-js/serenity-js/issues?state=open)
82-
or submit a pull request.
92+
## Contributing
8393

84-
Have feedback? Let me know on [LinkedIn](https://www.linkedin.com/in/janmolak/) or leave a comment in [Serenity/JS discussions on GitHub](/serenity-js/serenity-js/discussions/categories/comments).
94+
Contributions of all kinds are welcome! Get started with the [Contributing Guide](https://serenity-js.org/community/contributing/).
8595

86-
And if you have any questions about the framework, or simply want to say hello to other Serenity/JS developers, join us on [Serenity/JS Community Chat](https://matrix.to/#/#serenity-js:gitter.im).
96+
## Community
8797

88-
## Support Serenity/JS
98+
[![Follow Serenity/JS on LinkedIn](https://img.shields.io/badge/LinkedIn-Serenity%2FJS%20-0077B5?logo=linkedin)](https://www.linkedin.com/company/serenity-js)
99+
[![Watch Serenity/JS on YouTube](https://img.shields.io/badge/Watch-@serenity--js-E62117?logo=youtube)](https://www.youtube.com/@serenity-js)
100+
[![Join Serenity/JS Community Chat](https://img.shields.io/badge/Chat-Serenity%2FJS%20Community-FBD30B?logo=matrix)](https://matrix.to/#/#serenity-js:gitter.im)
101+
102+
Connect with other developers using Serenity/JS:
103+
104+
- [Updates on LinkedIn](https://www.linkedin.com/company/serenity-js)
105+
- [Community Chat](https://matrix.to/#/#serenity-js:gitter.im)
106+
- [Discussions Forum](https://github.com/orgs/serenity-js/discussions)
107+
- Explore the [💡How to... ?](https://github.com/orgs/serenity-js/discussions/categories/how-to) answers to common questions
108+
109+
Follow Serenity/JS to learn about new features, tutorials, and releases!
110+
111+
⭐ Star the main [Serenity/JS repository](https://github.com/serenity-js/serenity-js) to help others discover the framework!
89112

90-
Serenity/JS is a free open-source framework, so we rely on our [wonderful GitHub sponsors](https://github.com/sponsors/serenity-js) to keep the lights on.
113+
[![GitHub stars](https://img.shields.io/github/stars/serenity-js/serenity-js?label=Serenity%2FJS&logo=github&style=badge)](https://github.com/serenity-js/serenity-js)
91114

92-
If you appreciate all the effort that goes into making sophisticated tools easy to work with, please support our work and [become a Serenity/JS GitHub Sponsor](https://github.com/sponsors/serenity-js) today!
115+
## License
116+
117+
The Serenity/JS code base is licensed under the [Apache-2.0](https://opensource.org/license/apache-2-0) license,
118+
while its documentation and the [Serenity/JS Handbook](https://serenity-js.org/handbook/) are licensed under the [Creative Commons BY-NC-SA 4.0 International](https://creativecommons.org/licenses/by-nc-sa/4.0/).
119+
120+
See the [Serenity/JS License](https://serenity-js.org/legal/license/).
121+
122+
## Support
123+
124+
Support ongoing development through [GitHub Sponsors](https://github.com/sponsors/serenity-js). Sponsors gain access to [Serenity/JS Playbooks](https://github.com/serenity-js/playbooks)
125+
and priority help in the [Discussions Forum](https://github.com/orgs/serenity-js/discussions).
126+
127+
For commercial support or corporate sponsorship, please contact [Jan Molak](https://www.linkedin.com/in/janmolak/).
93128

94-
[![LinkedIn Follow](https://img.shields.io/badge/Follow%20Serenity%2FJS-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/company/serenity-js)
95-
[![YouTube Follow](https://img.shields.io/badge/Watch%20@serenity—JS-FA120F?style=for-the-badge&logo=youtube&logoColor=white)](https://www.youtube.com/@serenity-js)
96129
[![GitHub Sponsors](https://img.shields.io/badge/Support%20@serenity%2FJS-703EC8?style=for-the-badge&logo=github&logoColor=white)](https://github.com/sponsors/serenity-js)
130+

0 commit comments

Comments
 (0)