Protractor - Passing a variable in xpath

Question

I am automating my application using Protractor. For one of the elements, I am using xpath, which is as follow:

element(by.xpath('//ul[@id="employee-list"]/li[contains(text(),"Master Shifu")]'));

Instead of the string Master Shifu, I want to pass a variable empname. I tried a couple of things but no success. I would really appreciate help on this.

The last thing I tried is as follow, but it did not work:

element(by.xpath("//ul[@id="employee-list"]/li[contains(text(),'" + empname + "')]"));

When I use the above xpath, I am getting below error:

    Message:
        SyntaxError: missing ) after argument list
      Stack:
        C:\testing\protractor\page\employeelist_page.js:18
                    return element(by.xpath("//ul[@id="employee-list"]/li[contains(text(),'" + empname + "')]")).getText();
                                            ^^^^^^^^^^^
    
        SyntaxError: missing ) after argument list
            at createScript (vm.js:80:10)
            at Object.runInThisContext (vm.js:139:10)
            at Module._compile (module.js:616:28)
            at Object.Module._extensions..js (module.js:663:10)
            at Module.load (module.js:565:32)
            at tryModuleLoad (module.js:505:12)
            at Function.Module._load (module.js:497:3)
            at Module.require (module.js:596:17)
            at require (internal/module.js:11:18)
            at Object.<anonymous> (C:\testing\protractor\page\login_page.js:2:1)

Answer 1

SyntaxError: missing ) after argument list

You are nesting double quotes into double quotes:

return element(by.xpath("//ul[@id="employee-list"]/li[contains(text(),'" + empname + "')]")).getText();
                        ^   HERE  ^

I just usually use a combination of single and double quotes in cases like this:

return element(by.xpath("//ul[@id='employee-list']/li[contains(text(),'" + empname + "')]")).getText();

---

Or, alternatively, you can use the by.cssContainingText locator:

return element(by.cssContainingText("#employee-list > li", empname));

which I think is much more readable and straightforward.

Answer 2

Yes(as suggested by Alecxe) use by.cssContainingText locator as simplest way:

Example :

View:

<ul>
  <li class="pet">Dog</li>
  <li class="pet">Cat</li>
</ul>

Code:

// Returns the li for the dog, but not cat.
var pet='Dog';
var dog = element(by.cssContainingText('.pet', pet));