From fd7192136a14eda4e0b2b575c24f264ae6316291 Mon Sep 17 00:00:00 2001 From: Mihail Stoykov Date: Tue, 16 Jan 2024 11:13:27 +0200 Subject: [PATCH] Add release notes for #3519 --- release notes/v0.49.0.md | 44 +++++++++++++++++++++++++++++++++++++++- 1 file changed, 43 insertions(+), 1 deletion(-) diff --git a/release notes/v0.49.0.md b/release notes/v0.49.0.md index 42286f2121d..630647cf44c 100644 --- a/release notes/v0.49.0.md +++ b/release notes/v0.49.0.md @@ -85,7 +85,49 @@ The migration is straightforward. Just replace `k6/experimental/grpc` with `k6/n ### k6/html: Extract selection from element [#3519](https://github.com/grafana/k6/pull/3519) -// TODO fill with info +[`k6/html`](https://grafana.com/docs/k6/latest/javascript-api/k6-html/) has for been around for a while and allows you to search within an html document with an jquery-like API called [Selection](https://grafana.com/docs/k6/latest/javascript-api/k6-html/selection/), and also has support for the more standard [Element](https://grafana.com/docs/k6/latest/javascript-api/k6-html/element/) that represents DOM element. + +For a long time you get an Element from a Selection using the [`.get(index)`](https://grafana.com/docs/k6/latest/javascript-api/k6-html/selection/selection-get/), but you couldn't get back to a Selection from an Element. + +This happens to not be a common case, but one that in some cases requires rewrite of the code quite a lot. + +```javascript +let li = http.get("https://test.k6.io").html().find("li"); +li.each(function(_, element) { + // here element is an element not a selection + // but what if for each li we want to select something more? + // in jquery that will be: + let container = $(element).closest('ul.header-icons'); + // but what should `$` do? + // in a browser there is only 1 html document that you have access to + // in k6 though you can be working with multiple ones, so `$` can't know which one it should + // work against +}); +``` + +In order to support the above you can just use the selection, without going to element as in: + +```javascript +let li = http.get("https://test.k6.io").html().find("li"); +for (; li.size() > 0; li = li.next()) { + let ul = li.closest('ul.header-icons'); // li here is still a selection and we iterate over it. +} +``` + +This is not always possible though, and arguably isn't what most users will naturally do. + +Because of this we have now added a new [`.selection()`](https://grafana.com/docs/k6/latest/javascript-api/k6-html/element/element-selection/) which returns a selection for it's element. + + +```javascript + let li = http.get("https://test.k6.io").html().find("li"); + li.each(function(_, element) { + let container = element.selection().closest('ul.header-icons'); + // .. more code + }); +``` + +Thanks to @Azhovan! :bow: :tada: ### Collect usage data on imported internal modules and outputs [#3525](https://github.com/grafana/k6/pull/3525)