如何使用 javascript 增加元素定位器的值

Question

I need to grab the element for "n" of rows however the element value increments as below:

<select aria-invalid="false" id="select-fieldName-0-1" class="css-14xtrl2">. 
<select aria-invalid="false" id="select-fieldName-0-1-0" class="css-14xtrl2">.
<select aria-invalid="false" id="select-fieldName-0-1-1-0" class="css-14xtrl2">.
<select aria-invalid="false" id="select-fieldName-0-1-1-1-0" class="css-14xtrl2">.

and so on. How can I grab the element "id" to loop it for "n" number of times? Thanks in advance:)

Answer 1

i don't know why you're incrementing like that, but if i understand correctly you want to pick the value of all of them. Following @happyvirus comment you should do this:

const selectBoxes = document.querySelectorAll('[id^=select-fieldName]');

The ^ means a "starts like".

Then you could just loop selectBoxes, pick values, manipulate them, whatever.

Answer 2

I haven't found a consistent pattern in the transformation of the first three elements of your example. If I consider it accurate from the 2nd element then you are able to generate the selectors with the following JavaScript methods: String.split() , Array.splice() , Array.indexOf() and Array.join()

You can grab a string pattern ( '-0-1-' ) which after you will insert the incrementer string part ( '1-' ). Note: Array.splice() is an in-place array method, it is applied directly on the original array.

Example (iterated 8 times):

let sel ='select-fieldName-0-1-0'
for (let i = 0; i < 8; i++) {
  const selArr = sel.split('')
  selArr.splice(sel.indexOf('-0-1-') + '-0-1-'.length, 0, '1-')
  sel = selArr.join('')
  console.log(sel)
}

Output:

select-fieldName-0-1-1-0
select-fieldName-0-1-1-1-0
select-fieldName-0-1-1-1-1-0
select-fieldName-0-1-1-1-1-1-0
select-fieldName-0-1-1-1-1-1-1-0
select-fieldName-0-1-1-1-1-1-1-1-0
select-fieldName-0-1-1-1-1-1-1-1-1-0
select-fieldName-0-1-1-1-1-1-1-1-1-1-0

So if you are inside your main playwright script, then you can use the for loop to interact with the elements with the above selector pattern:

for (...)
  ...
  await page.click(sel)
}

Place the playwright actions to the right place, eg the 1st iteration should be clicked before the for loop starts if follow my example.