2

I tried any possible way to click a "type=submit" button in a form, but it doesn't click the button, the only way is by using "text = ' Register '" but I can't use the text because the form language may change based on the UI language selected by the user.

public Task ClickRegister() => Page.Locator("type=submit").ClickAsync();

Here is the FE code:

<button _ngcontent-yyv-c173="" type="submit" class="btn btn-primary"> Register </button>

I'm using Visual Studio

Ken White
  • 123,280
  • 14
  • 225
  • 444
Onixy
  • 35
  • 1
  • 5

3 Answers3

2

That's not a valid selector. Can you try something like BUTTON[type="submit"]?

hardkoded
  • 18,915
  • 3
  • 52
  • 64
1

While it's possible to select an element using class selectors, it's not a good pattern. In e2e tests you should only use ways that the user can use when targeting an interactive element.

And only use testid or other forms of selectors (like class selectors) when targeting none interactive elements.

await page.getByRole('button', {name: 'Sign In'})

This would target a button with the text Sign In.

  • Your e2e test should be stable in it's "alignment" (url, locale, etc).
  • Then you can move on to the "act" phase, this is were you preform all the actions.
  • Before finally coming to the "analyse" phase (where you "expect" stuff).

Your e2e tests should mock the API calls so that it can be run with out going against an actual backend.

Evanion
  • 188
  • 3
  • 12
-2

There's a few ways to tackle this, any of the following will work:

  • button.btn (combination of element button and partial class btn)
  • button.btn.btn-primary (combo of element and full class btn btn-primary)
  • button.btn-primary (combo of element and unique part of class btn-primary)
  • button.btn.btn-primary[type="submit"] (combo of element, full class and attribute type)
  • .btn.btn-primary (just the full class)

If you have pages that have a "Register" like button on the right, "Cancel" like button on left, "Accept" cookies button on a banner, your CSS selector button[type=submit] may be brittle, hence i would recommend to use the full class as the unique identifier, e.g. button.btn-primary for Register, or button.btn-primary.pull-left for Cancel. Also you may find the developer has put the button in a row class layered in the DOM which you can utilise to make it less brittle, e.g. .btn-row button.btn-primary.

You can get more info on CSS selector combinations from W3Schools - CSS Selector Reference

Pman
  • 32
  • 3
  • That's also a good answer. Thank you. Yes, I'm new to playwright and I'm trying to understand selectors sintax. Sadly I'm not a very CSS expert and this is putting me in trouble. Sometimes I don't really understand the sintax inside a locator("") like this example, 'button >> text=Submit'. Why those ">>"? Btw thank you, I'll give a look to W3School – Onixy Mar 30 '22 at 13:44
  • No problem, have a look at some css courses first, that might help, here's one as an example https://testautomationu.applitools.com/web-element-locator-strategies/ CSS you don't need to use the chevrons like in xpath, CSS you can skip half the DOM to get to where you need. The HTML in F12 you can then use any of it, e.g. the Element type, ID (if exists), Attribute, Class and anything else that's there. Each you reference differently ID you use #IDname, Atribute you use [type="Submit], Class you use .classname and element you just state it as is like button. So example: – Pman Mar 30 '22 at 14:09
  • CSS = '#Login button.btn-primary[type="submit"]' Within ID of Login, there's an Element of button in the tree, with a class of .btn-primary and an attribute of type = "submit" – Pman Mar 30 '22 at 14:10