Repository: Significant-Gravitas/Auto-GPT
File: autogpt_platform/frontend/src/components/agptui/ProfileInfoForm.tsx (TypeScript)

Code before:
                        data-testid={`profile-info-form-link${linkNum}`}
                        placeholder="https://"
                        defaultValue={link || ""}
                        className="font-circular w-full border-none bg-transparent text-base font-normal text-neutral-900 placeholder:text-neutral-400 focus:outline-none dark:text-white dark:placeholder:text-neutral-500"
                        onChange={(e) => {
                          const newLinks = [...profileData.links];
                          newLinks[linkNum - 1] = e.target.value;
                          const newProfileData = {
                            ...profileData,
                            links: newLinks,
                          };
                          setProfileData(newProfileData);
                        }}
                      />
                    </div>
                  </div>
                );
              })}
            </div>
          </section>

          <Separator />

          <div className="flex h-[50px] items-center justify-end gap-3 py-8">
            <Button
              data-testid="profile-info-form-cancel"
              type="button"
              variant="secondary"
              className="font-circular h-[50px] rounded-[35px] bg-neutral-200 px-6 py-3 text-base font-medium text-neutral-800 transition-colors hover:bg-neutral-300 dark:border-neutral-700 dark:bg-neutral-700 dark:text-neutral-200 dark:hover:border-neutral-600 dark:hover:bg-neutral-600"
              onClick={() => {
                setProfileData(profile);
              }}
            >
              Cancel
            </Button>
            <Button
              data-testid="profile-info-form-save"
              type="submit"
              disabled={isSubmitting}
              className="font-circular h-[50px] rounded-[35px] bg-neutral-800 px-6 py-3 text-base font-medium text-white transition-colors hover:bg-neutral-900 dark:bg-neutral-200 dark:text-neutral-900 dark:hover:bg-neutral-100"
              onClick={submitForm}
            >
              {isSubmitting ? "Saving..." : "Save changes"}
            </Button>
          </div>
        </form>
      </div>
    </div>
  );
}


Review comment (refactor):
Better to grab by role:
```ts
page.getByRole("button", {name: "Cancel"})
```
or with shorthand the helpers/selectors we have:
```ts
const { getButton } = getSelectors(page)

getButton("Cancel") // just a shorthand for the code above
```
Same for the `Save` button below. This ensures the buttons on the UI are either using the `<button>` HTML tag or have the `role="button"` attribute. So we are not only querying elements but ensuring accessibility at the same time 🙇🏽 

A bit more context [here](https://playwright.dev/docs/locators#locating-elements).

Code after:
                  <div key={linkNum} className="w-full">
                    <label
                      htmlFor={`link${linkNum}`}
                      className="font-circular mb-1.5 block text-base font-normal leading-tight text-neutral-700 dark:text-neutral-300"
                    >
                      Link {linkNum}
                    </label>
                    <div className="rounded-[55px] border border-slate-200 px-4 py-2.5 dark:border-slate-700 dark:bg-slate-800">
                      <input
                        type="text"
                        name={`link${linkNum}`}
                        id={`link${linkNum}`}
                        placeholder="https://"
                        defaultValue={link || ""}
                        className="font-circular w-full border-none bg-transparent text-base font-normal text-neutral-900 placeholder:text-neutral-400 focus:outline-none dark:text-white dark:placeholder:text-neutral-500"
                        onChange={(e) => {
                          const newLinks = [...profileData.links];
                          newLinks[linkNum - 1] = e.target.value;
                          const newProfileData = {
                            ...profileData,
                            links: newLinks,
                          };
                          setProfileData(newProfileData);
                        }}
                      />
                    </div>
                  </div>
                );
              })}
            </div>
          </section>

          <Separator />

          <div className="flex h-[50px] items-center justify-end gap-3 py-8">
            {/* FRONTEND-TODO: Need to fix it */}
            {/* <Button
              type="button"
              variant="secondary"
              className="font-circular h-[50px] rounded-[35px] bg-neutral-200 px-6 py-3 text-base font-medium text-neutral-800 transition-colors hover:bg-neutral-300 dark:border-neutral-700 dark:bg-neutral-700 dark:text-neutral-200 dark:hover:border-neutral-600 dark:hover:bg-neutral-600"
              onClick={() => {
                setProfileData(profile);
              }}
            >
              Cancel
            </Button> */}
            <Button
              type="submit"
              disabled={isSubmitting}
              className="font-circular h-[50px] rounded-[35px] bg-neutral-800 px-6 py-3 text-base font-medium text-white transition-colors hover:bg-neutral-900 dark:bg-neutral-200 dark:text-neutral-900 dark:hover:bg-neutral-100"
              onClick={submitForm}