@serenity-js/web - npm Package Compare versions

Comparing version 3.21.0 to 3.21.1

CHANGELOG.md

@@ -6,2 +6,14 @@ # Change Log
 
+## [3.21.1](https://github.com/serenity-js/serenity-js/compare/v3.21.0...v3.21.1) (2024-03-16)
+
+
+### Bug Fixes
+
+* **core:** upgraded dependency on tiny-types to 1.22.0 ([2c0bb2a](https://github.com/serenity-js/serenity-js/commit/2c0bb2aeee7df7652853606c1ea10794157eb9fb))
+* **web:** documented By ([69573aa](https://github.com/serenity-js/serenity-js/commit/69573aa6b4d669546af710bcf9683d1a24967a91))
+
+
+
+
+
 # [3.21.0](https://github.com/serenity-js/serenity-js/compare/v3.20.0...v3.21.0) (2024-03-04)
@@ -8,0 +20,0 @@

lib/screenplay/models/selectors/By.d.ts

@@ -9,2 +9,47 @@ import type { Answerable } from '@serenity-js/core';
 /**
+ * `By` produces a {@apilink Selector} used to locate a {@apilink PageElement} or {@apilink PageElements} on a web page.
+ * Selectors can be defined using a static value or a {@link Question} to be resolved at runtime.
+ *
+ * ### Defining a selector using a static value
+ *
+ * ```typescript
+ * import { PageElement, By } from '@serenity-js/web'
+ *
+ * class LoginForm {
+ *   static usernameField = () =>
+ *     PageElement.located(By.id('username'))              // locate element by its id
+ *       .describedAs('username field')
+ *
+ *   static passwordField = () =>
+ *     PageElement.of(By.css('[data-test="password"]'))    // locate element using a CSS selector
+ *       .describedAs('password field')
+ * }
+ * ```
+ *
+ * ### Defining a selector using a Question
+ *
+ * Each method on this class accepts an {@link Answerable} to allow for dynamic resolution of the selector.
+ * This can be useful when the selector is not known at the time of writing the test, or when the selector
+ * needs to be calculated based on the state of the system under test.
+ *
+ * The example below demonstrates how to use {@link q} to define a selector that includes a dynamic value.
+ *
+ * ```typescript
+ * import { q } from '@serenity-js/core'
+ * import { PageElement, By } from '@serenity-js/web'
+ *
+ * class FormField {
+ *   static withTestId = (id: Answerable<string>) =>
+ *     PageElement.of(By.css(q`input[data-test-id="${ id }"]`))
+ *       .describedAs('form field')
+ * }
+ *
+ * ```
+ *
+ * ### Learn more
+ * - [Page Element Query Language](/handbook/web-testing/page-element-query-language)
+ * - {@apilink PageElement}
+ * - {@apilink PageElements}
+ * - {@apilink q}
+ *
  * @group Models
@@ -11,0 +56,0 @@ */

lib/screenplay/models/selectors/By.js

@@ -12,2 +12,47 @@ "use strict";
 /**
+ * `By` produces a {@apilink Selector} used to locate a {@apilink PageElement} or {@apilink PageElements} on a web page.
+ * Selectors can be defined using a static value or a {@link Question} to be resolved at runtime.
+ *
+ * ### Defining a selector using a static value
+ *
+ * ```typescript
+ * import { PageElement, By } from '@serenity-js/web'
+ *
+ * class LoginForm {
+ *   static usernameField = () =>
+ *     PageElement.located(By.id('username'))              // locate element by its id
+ *       .describedAs('username field')
+ *
+ *   static passwordField = () =>
+ *     PageElement.of(By.css('[data-test="password"]'))    // locate element using a CSS selector
+ *       .describedAs('password field')
+ * }
+ * ```
+ *
+ * ### Defining a selector using a Question
+ *
+ * Each method on this class accepts an {@link Answerable} to allow for dynamic resolution of the selector.
+ * This can be useful when the selector is not known at the time of writing the test, or when the selector
+ * needs to be calculated based on the state of the system under test.
+ *
+ * The example below demonstrates how to use {@link q} to define a selector that includes a dynamic value.
+ *
+ * ```typescript
+ * import { q } from '@serenity-js/core'
+ * import { PageElement, By } from '@serenity-js/web'
+ *
+ * class FormField {
+ *   static withTestId = (id: Answerable<string>) =>
+ *     PageElement.of(By.css(q`input[data-test-id="${ id }"]`))
+ *       .describedAs('form field')
+ * }
+ *
+ * ```
+ *
+ * ### Learn more
+ * - [Page Element Query Language](/handbook/web-testing/page-element-query-language)
+ * - {@apilink PageElement}
+ * - {@apilink PageElements}
+ * - {@apilink q}
+ *
  * @group Models
@@ -14,0 +59,0 @@ */

package.json

 {
   "name": "@serenity-js/web",
-  "version": "3.21.0",
+  "version": "3.21.1",
   "description": "Serenity/JS Screenplay Pattern APIs for the Web",
@@ -48,5 +48,5 @@ "author": {
   "dependencies": {
-    "@serenity-js/assertions": "3.21.0",
-    "@serenity-js/core": "3.21.0",
-    "tiny-types": "1.21.0"
+    "@serenity-js/assertions": "3.21.1",
+    "@serenity-js/core": "3.21.1",
+    "tiny-types": "1.22.0"
   },
@@ -63,3 +63,3 @@ "devDependencies": {
   },
-  "gitHead": "98621d99c073223dc40cc3dc836c4e2ee676aa9c"
+  "gitHead": "34d2e43c9e6d504eea7c774ea8e872395cd94b98"
 }

src/screenplay/models/selectors/By.ts

@@ -12,2 +12,47 @@ import type { Answerable} from '@serenity-js/core';
 /**
+ * `By` produces a {@apilink Selector} used to locate a {@apilink PageElement} or {@apilink PageElements} on a web page.
+ * Selectors can be defined using a static value or a {@link Question} to be resolved at runtime.
+ *
+ * ### Defining a selector using a static value
+ *
+ * ```typescript
+ * import { PageElement, By } from '@serenity-js/web'
+ *
+ * class LoginForm {
+ *   static usernameField = () =>
+ *     PageElement.located(By.id('username'))              // locate element by its id
+ *       .describedAs('username field')
+ *
+ *   static passwordField = () =>
+ *     PageElement.of(By.css('[data-test="password"]'))    // locate element using a CSS selector
+ *       .describedAs('password field')
+ * }
+ * ```
+ *
+ * ### Defining a selector using a Question
+ *
+ * Each method on this class accepts an {@link Answerable} to allow for dynamic resolution of the selector.
+ * This can be useful when the selector is not known at the time of writing the test, or when the selector
+ * needs to be calculated based on the state of the system under test.
+ *
+ * The example below demonstrates how to use {@link q} to define a selector that includes a dynamic value.
+ *
+ * ```typescript
+ * import { q } from '@serenity-js/core'
+ * import { PageElement, By } from '@serenity-js/web'
+ *
+ * class FormField {
+ *   static withTestId = (id: Answerable<string>) =>
+ *     PageElement.of(By.css(q`input[data-test-id="${ id }"]`))
+ *       .describedAs('form field')
+ * }
+ *
+ * ```
+ *
+ * ### Learn more
+ * - [Page Element Query Language](/handbook/web-testing/page-element-query-language)
+ * - {@apilink PageElement}
+ * - {@apilink PageElements}
+ * - {@apilink q}
+ *
  * @group Models
@@ -14,0 +59,0 @@ */

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

722758

increased by0.76%

Lines of code

15390

increased by0.88%

Dependency changes

• + Added@serenity-js/assertions@3.21.1(transitive)

• + Added@serenity-js/core@3.21.1(transitive)

• + Addedtiny-types@1.22.0(transitive)

• - Removed@serenity-js/assertions@3.21.0(transitive)

• - Removed@serenity-js/core@3.21.0(transitive)

• - Removedtiny-types@1.21.0(transitive)

• Updated@serenity-js/assertions@3.21.1

• Updated@serenity-js/core@3.21.1

• Updatedtiny-types@1.22.0