CODEWITHSUNDEEP
javascriptprotractorhtml-select
TesterABC
TesterABC

Reputation: 1226

Select option by value in Protractor fails

I'm trying to select an option by option value. In this scenario, I have Categories and sub categories. Here is the application I'm testing using Protractor.

Adding a Category

Adding a Subcategory

Here what I'm doing is first add the Category. and I have to refresh the page, because, only if I refresh the page, the added category will be listed in the category drop-down shown in subcategory tab. So, after refresh the page I click on subcategory tab and try to fill the fields in subcategory. But, my script fails when selecting the category from options.

Here are the two ways I tried.

Method 1:

// Select Category
element.all(by.model('sub_category.category_id')).each(function (eachElement, index)
{
    eachElement.click();
    browser.driver.sleep(500);
    element(by.css('.ng-not-empty > option:nth-child(10)')).click();
    browser.driver.sleep(500);
});

Method 2:

var select = element(by.model('sub_category.category_id'));
select.$('[value="Test Supplier Category by Me"]').click();
browser.driver.sleep(500);

Both methods gives an error called,

Failed: No element found using locator ...

Here is the HTML

<select required="required" class="form-control empty ng-pristine ng-empty ng-invalid ng-invalid-required ng-touched" name="category_id" ng-model="sub_category.category_id" ng-options="category.id as category.category for category in categories_index" ng-required="true"><option selected="selected" value="?"></option><option value="string:6" label="Staff Cost">Staff Cost</option><option value="string:7" label="Utility Bill Expenses">Utility Bill Expenses</option><option value="string:8" label="Administrative Expenses">Administrative Expenses</option><option value="string:9" label="Building Rent">Building Rent</option><option value="string:10" label="Professional Charges &amp; Fees">Professional Charges &amp; Fees</option><option value="string:11" label="Vehicle Expenses">Vehicle Expenses</option><option value="string:13" label="Training &amp; Workshop Cost">Training &amp; Workshop Cost</option><option value="string:14" label="Marketing &amp; Promotional Expenses">Marketing &amp; Promotional Expenses</option><option value="string:15" label="Printing &amp; Supplies">Printing &amp; Supplies</option><option value="string:16" label="Fixed Assets">Fixed Assets</option><option value="string:17" label="Finance Cost">Finance Cost</option><option value="string:18" label="Statutory Payments">Statutory Payments</option><option value="string:19" label="Overseas Travelling Expenses">Overseas Travelling Expenses</option><option value="string:20" label="Test Supplier Category By Me">Overseas Travelling Expenses</option></select>

When I'm using Metod 1, following error occurs.

1) Protractor Demo App should have a title
  Message:
    Failed: No element found using locator: By.cssSelector(".ng-not-empty > opti
on:nth-child(10)")
  Stack:
    NoSuchElementError: No element found using locator: By.cssSelector(".ng-not-
empty > option:nth-child(10)")
        at new bot.Error (C:\Users\Manuli\AppData\Roaming\npm\node_modules\protr
actor\node_modules\selenium-webdriver\lib\atoms\error.js:108:18)
        at C:\Users\Manuli\AppData\Roaming\npm\node_modules\protractor\lib\eleme
nt.js:674:15
        at goog.async.run.processWorkQueue (C:\Users\Manuli\AppData\Roaming\npm\
node_modules\protractor\node_modules\selenium-webdriver\lib\goog\async\run.js:12
4:15)
        at process._tickCallback (node.js:406:9)
    Error
        at [object Object].ElementArrayFinder.applyAction_ (C:\Users\Manuli\AppD
ata\Roaming\npm\node_modules\protractor\lib\element.js:380:21)
        at [object Object].ElementArrayFinder.(anonymous function) [as click] (C
:\Users\Manuli\AppData\Roaming\npm\node_modules\protractor\lib\element.js:78:17)

        at [object Object].ElementFinder.(anonymous function) [as click] (C:\Use
rs\Manuli\AppData\Roaming\npm\node_modules\protractor\lib\element.js:709:7)
        at D:\My Work\Protractor\Financial\supplierCategories.js:75:62
        at C:\Users\Manuli\AppData\Roaming\npm\node_modules\protractor\lib\eleme
nt.js:499:23
        at Array.map (native)
        at C:\Users\Manuli\AppData\Roaming\npm\node_modules\protractor\lib\eleme
nt.js:498:20
    From: Task: Run it("should have a title") in control flow
        at Object.<anonymous> (C:\Users\Manuli\AppData\Roaming\npm\node_modules\
protractor\node_modules\jasminewd2\index.js:81:14)
        at attemptAsync (C:\Users\Manuli\AppData\Roaming\npm\node_modules\protra
ctor\node_modules\jasmine-core\lib\jasmine-core\jasmine.js:1916:24)
        at QueueRunner.run (C:\Users\Manuli\AppData\Roaming\npm\node_modules\pro
tractor\node_modules\jasmine-core\lib\jasmine-core\jasmine.js:1871:9)
        at QueueRunner.execute (C:\Users\Manuli\AppData\Roaming\npm\node_modules
\protractor\node_modules\jasmine-core\lib\jasmine-core\jasmine.js:1859:10)
        at Spec.Env.queueRunnerFactory (C:\Users\Manuli\AppData\Roaming\npm\node
_modules\protractor\node_modules\jasmine-core\lib\jasmine-core\jasmine.js:697:35
)
        at Spec.execute (C:\Users\Manuli\AppData\Roaming\npm\node_modules\protra
ctor\node_modules\jasmine-core\lib\jasmine-core\jasmine.js:359:10)
        at Object.fn (C:\Users\Manuli\AppData\Roaming\npm\node_modules\protracto
r\node_modules\jasmine-core\lib\jasmine-core\jasmine.js:2479:37)
        at attemptAsync (C:\Users\Manuli\AppData\Roaming\npm\node_modules\protra
ctor\node_modules\jasmine-core\lib\jasmine-core\jasmine.js:1916:24)
        at QueueRunner.run (C:\Users\Manuli\AppData\Roaming\npm\node_modules\pro
tractor\node_modules\jasmine-core\lib\jasmine-core\jasmine.js:1871:9)
        at QueueRunner.execute (C:\Users\Manuli\AppData\Roaming\npm\node_modules
\protractor\node_modules\jasmine-core\lib\jasmine-core\jasmine.js:1859:10)
    From asynchronous test:
    Error
        at Suite.<anonymous> (D:\My Work\Protractor\Financial\supplierCategories
.js:2:2)
        at addSpecsToSuite (C:\Users\Manuli\AppData\Roaming\npm\node_modules\pro
tractor\node_modules\jasmine-core\lib\jasmine-core\jasmine.js:833:25)
        at Env.describe (C:\Users\Manuli\AppData\Roaming\npm\node_modules\protra
ctor\node_modules\jasmine-core\lib\jasmine-core\jasmine.js:802:7)
        at jasmineInterface.describe (C:\Users\Manuli\AppData\Roaming\npm\node_m
odules\protractor\node_modules\jasmine-core\lib\jasmine-core\jasmine.js:3375:18)

        at Object.<anonymous> (D:\My Work\Protractor\Financial\supplierCategorie
s.js:1:1)

1 spec, 1 failure
Finished in 28.377 seconds
[launcher] 0 instance(s) of WebDriver still running
[launcher] chrome #1 failed 1 test(s)
[launcher] overall: 1 failed spec(s)
[launcher] Process exited with error code 1

When I'm using Metod 2, following error occurs.

1) Protractor Demo App should have a title
  Message:
    Failed: No element found using locator: By.cssSelector("[value=\"Test Suppli
er Category by Manuli\"]")
  Stack:
    NoSuchElementError: No element found using locator: By.cssSelector("[value=\
"Test Supplier Category by Manuli\"]")
        at new bot.Error (C:\Users\Manuli\AppData\Roaming\npm\node_modules\protr
actor\node_modules\selenium-webdriver\lib\atoms\error.js:108:18)
        at C:\Users\Manuli\AppData\Roaming\npm\node_modules\protractor\lib\eleme
nt.js:674:15
        at goog.async.run.processWorkQueue (C:\Users\Manuli\AppData\Roaming\npm\
node_modules\protractor\node_modules\selenium-webdriver\lib\goog\async\run.js:12
4:15)
        at process._tickCallback (node.js:406:9)
    Error
        at [object Object].ElementArrayFinder.applyAction_ (C:\Users\Manuli\AppD
ata\Roaming\npm\node_modules\protractor\lib\element.js:380:21)
        at [object Object].ElementArrayFinder.(anonymous function) [as click] (C
:\Users\Manuli\AppData\Roaming\npm\node_modules\protractor\lib\element.js:78:17)

        at [object Object].ElementFinder.(anonymous function) [as click] (C:\Use
rs\Manuli\AppData\Roaming\npm\node_modules\protractor\lib\element.js:709:7)
        at Object.<anonymous> (D:\My Work\Protractor\Financial\supplierCategorie
s.js:81:59)
        at C:\Users\Manuli\AppData\Roaming\npm\node_modules\protractor\node_modu
les\jasminewd2\index.js:96:23
        at new wrappedCtr (C:\Users\Manuli\AppData\Roaming\npm\node_modules\prot
ractor\node_modules\selenium-webdriver\lib\goog\base.js:2468:26)
        at controlFlowExecute (C:\Users\Manuli\AppData\Roaming\npm\node_modules\
protractor\node_modules\jasminewd2\index.js:82:18)
    From: Task: Run it("should have a title") in control flow
        at Object.<anonymous> (C:\Users\Manuli\AppData\Roaming\npm\node_modules\
protractor\node_modules\jasminewd2\index.js:81:14)
        at attemptAsync (C:\Users\Manuli\AppData\Roaming\npm\node_modules\protra
ctor\node_modules\jasmine-core\lib\jasmine-core\jasmine.js:1916:24)
        at QueueRunner.run (C:\Users\Manuli\AppData\Roaming\npm\node_modules\pro
tractor\node_modules\jasmine-core\lib\jasmine-core\jasmine.js:1871:9)
        at QueueRunner.execute (C:\Users\Manuli\AppData\Roaming\npm\node_modules
\protractor\node_modules\jasmine-core\lib\jasmine-core\jasmine.js:1859:10)
        at Spec.Env.queueRunnerFactory (C:\Users\Manuli\AppData\Roaming\npm\node
_modules\protractor\node_modules\jasmine-core\lib\jasmine-core\jasmine.js:697:35
)
        at Spec.execute (C:\Users\Manuli\AppData\Roaming\npm\node_modules\protra
ctor\node_modules\jasmine-core\lib\jasmine-core\jasmine.js:359:10)
        at Object.fn (C:\Users\Manuli\AppData\Roaming\npm\node_modules\protracto
r\node_modules\jasmine-core\lib\jasmine-core\jasmine.js:2479:37)
        at attemptAsync (C:\Users\Manuli\AppData\Roaming\npm\node_modules\protra
ctor\node_modules\jasmine-core\lib\jasmine-core\jasmine.js:1916:24)
        at QueueRunner.run (C:\Users\Manuli\AppData\Roaming\npm\node_modules\pro
tractor\node_modules\jasmine-core\lib\jasmine-core\jasmine.js:1871:9)
        at QueueRunner.execute (C:\Users\Manuli\AppData\Roaming\npm\node_modules
\protractor\node_modules\jasmine-core\lib\jasmine-core\jasmine.js:1859:10)
    From asynchronous test:
    Error
        at Suite.<anonymous> (D:\My Work\Protractor\Financial\supplierCategories
.js:2:2)
        at addSpecsToSuite (C:\Users\Manuli\AppData\Roaming\npm\node_modules\pro
tractor\node_modules\jasmine-core\lib\jasmine-core\jasmine.js:833:25)
        at Env.describe (C:\Users\Manuli\AppData\Roaming\npm\node_modules\protra
ctor\node_modules\jasmine-core\lib\jasmine-core\jasmine.js:802:7)
        at jasmineInterface.describe (C:\Users\Manuli\AppData\Roaming\npm\node_m
odules\protractor\node_modules\jasmine-core\lib\jasmine-core\jasmine.js:3375:18)

        at Object.<anonymous> (D:\My Work\Protractor\Financial\supplierCategorie
s.js:1:1)

1 spec, 1 failure
Finished in 27.754 seconds
[launcher] 0 instance(s) of WebDriver still running
[launcher] chrome #1 failed 1 test(s)
[launcher] overall: 1 failed spec(s)
[launcher] Process exited with error code 1

Upvotes: 1

Views: 860

Answers (1)

alecxe
alecxe

Reputation: 474021

First of all, I don't see the Test Supplier Category by Me option in the posted HTML.

Also, it looks like you are checking the value attribute, but should be checking the text of the option instead. This could be done with an XPath locator:

element(by.xpath("//option[. = 'Utility Bill Expenses']")).click();

But, I would really look into using a Select wrapper proposed here:

Then, the code would be as simple as:

var SelectWrapper  = require('select-wrapper');
var mySelect = new SelectWrapper(by.model('sub_category.category_id'));

mySelect.selectByText('Utility Bill Expenses');

Upvotes: 1

Related Questions