Selenium: Click on input-field with complicated selector

Question

I need the right direction to click on a input field. When I copy the CSS path I get the following:

html body#root div#box div#content div#C_INTERNAL_OBJECT-98286949812.container div#mainPanel.section div#C_DOS_UPDATE-169276301164.container div.content form#C_DOS_UPDATE-169276301164-FORM.parsed div.layout table#L_DOS_UPDATE-160728179478.cols2 tbody tr td table#E_DOS_TITEL-89531585980.element tbody tr td.cell input#E_DOS_TITEL-89531585980-Form-68356896585.form

The bold parts are variable and are changing. Next to this I want to write my tests (PHPunit based) to keep them working also when things are changed (mainly the uppercase parts are relevant and don't change). So I asked our developers for the basic structure. I got this:

.content
    .mainPanel
        .container.detail
        .container.list
        .container.tab
    .sidePanel
        .container.search

Perhaps it's simple for other people, but I don't know how to get the inputfield clicked with this information. How do I select it with a CSS selector which don't use the whole CSS path and only the basic structure above and the absolutely needed parts?

Help would be really great because I'm feeling a little bit lost and I can't ask the devs at the moment.

Answer 1

CSS selectors can also match strings that start with, end with, or contain a certain substring. For example

input[id^="E_DOS_TITEL"] 

will match an input element whose id attribute starts with the text E_DOS_TITEL. The ends with comparison operator is $=, and contains is *=.

The example provided above should work as long as it's the only input element on the page whose id begins with that text. If there's more inputs on the page and you want to select a specific one, you could try adding more specificity with

#content #mainPanel table input[id^="E_DOS_TITEL"] 

If that's still not matching, it would be helpful if you would be able to post the HTML source of the page in question.