Repository: cypress-io/cypress
File: packages/launchpad/src/setup/OpenBrowserList.vue (Vue)

Code before:
<template>
  <form
    v-if="props.gql.browsers"
    @submit.prevent="emit('launch', props.gql?.currentBrowser?.path)"
  >
    <div
      class="flex flex-wrap justify-center gap-6 py-16"
      data-cy="open-browser-list"
    >
      <div
        v-for="browser of props.gql.browsers"
        :key="browser.id"
        class="relative block pt-6 pb-4 text-center rounded w-160px border-1"
        :class="{
          'border-jade-300 ring-2 ring-jade-50': browser.isSelected,
          'border-gray-200': !browser.isSelected,
          'filter grayscale bg-gray-100': browser.disabled,
          'hover:border-indigo-200 hover:ring-2 hover:ring-indigo-50': !browser.disabled && !browser.isSelected
        }"
        :data-selected-browser="browser.isSelected"
        :data-browser-id="browser.id"
      >
        <input
          :id="browser.id"
          :key="browser.id"
          type="radio"
          :value="browser.id"
          :disabled="browser.disabled"
          class="absolute opacity-0"
          :class="{
            'filter grayscale': browser.disabled
          }"
          @click="setSelected(browser.id)"
        >
        <label
          :for="browser.id"
          class="radio-label"
        >
          <div class="text-center">
            <img
              :src="allBrowsersIcons[browser.displayName]"
              :alt="browser.displayName"
              class="inline w-40px h-40px"
            >
          </div>
          <div class="pt-2 text-lg text-indigo-600">{{ browser.displayName }}</div>

Review comment (suggestion):
I feel like we want `data-cy-selected-browser` etc here, unless some non-Cypress code in the app intends to read these attributes.

Code after:
<template>
  <form
    v-if="props.gql.browsers"
    @submit.prevent="emit('launch', props.gql?.currentBrowser?.path)"
  >
    <div
      class="flex flex-wrap py-16 gap-6 justify-center"
      data-cy="open-browser-list"
    >
      <div
        v-for="browser of props.gql.browsers"
        :key="browser.id"
        class="rounded border-1 text-center pt-6 pb-4 w-160px relative block"
        :class="{
          'border-jade-300 ring-2 ring-jade-50': browser.isSelected,
          'border-gray-200': !browser.isSelected,
          'filter grayscale bg-gray-100': browser.disabled,
          'hover:border-indigo-200 hover:ring-2 hover:ring-indigo-50': !browser.disabled && !browser.isSelected
        }"
      >
        <input
          :id="browser.id"
          :key="browser.id"
          v-model="selectedBrowserId"
          type="radio"
          :value="browser.id"
          :disabled="browser.disabled"
          class="opacity-0 absolute"
          :class="{
            'filter grayscale': browser.disabled
          }"
        >
        <label
          :for="browser.id"
          class="radio-label"
        >
          <div class="text-center">
            <img
              :src="allBrowsersIcons[browser.displayName]"
              alt=""
              class="h-40px w-40px inline"
            >
          </div>
          <div class="text-lg pt-2 text-indigo-600">{{ browser.displayName }}</div>
          <div class="text-xs text-gray-400">v{{ browser.majorVersion }}</div>
        </label>