Picking options from Plasmic selectbox in e2e tests

Issues
1

I’m having issues using Select and Select.Option feather components in Capybara tests with Selenium.

I’m used to the Capybara goodness of

select "option_name", from: "select_name"

or the Cypress way

cy.get('select').select('optionName')

What I tried so far with Capybara:

def plasmic_select_value(aria_label, option_value)
  find("div[aria-label=\"#{aria_label}\"]", match: :first).click
  find("div[data-key=\"#{option_value}\"]", match: :first).click
end

What I tried so far with Cypress:

Cypress.Commands.add("selectFirstFromDropdown", { prevSubject: true }, (subject: Cypress.Chainable<undefined>) => {
  cy.wrap(subject).closest("[class*=\"PlasmicSelect_root\"]").click()
    .then(($el) => {
      cy.window().then((win) => {
        (win.document.querySelector("[class*=\"PlasmicSelect__Option\"]") as HTMLElement).click();
      })
    })
});

Both solutions feel hacky and unstable in regards of that they have weird timing issues sometimes.

What is the idiomatic way to select an option from a Plasmic selectbox in an e2e test?

2

I found this: https://github.com/plasmicapp/plasmic/blob/d77514328c5ed3df3af84ff5c9f35f351fc1c276/packages/plume-stories/src/components/select/Select.spec.tsx#L21-L38

Is this the idea? Assign testid and then select via [role="listbox"]?

3

That is indeed a common approach to labeling elements