Protractor find parent element - selenium

Question

<label class="radio inline check">
<input class="input ng-new ng-valid" name="BookType" required="" type="radio">
<!---->
<!---->
Fiction
</label>
<label class="radio inline check">
<input class="input ng-new ng-valid" name="BookType" required="" type="radio">
<!---->
<!---->
NonFiction
</label>
<label class="radio inline check">
<input class="input ng-new ng-valid" name="BookTypeReal" required="" type="radio">
<!---->
<!---->
Fiction
</label>
<label class="radio inline check">
<input class="input ng-new ng-valid" name="BookTypeReal" required="" type="radio">
<!---->
<!---->
Fantasy
</label>
http://www.protractortest.org/#/api?view=ElementArrayFinder.prototype.filter
If I use
element.all(locator).filter(filterFn)
the text returned is empty.
How can I go to parent element <label> to get the text?
label[class="radio inline check"]
returns 60 elements where more than one getText will return same text so it won't be unique.
input[name="BookType"]
returns two elements where each element is unique.

Answer 1

I used the following approach using TypeScript:
import {by, ElementFinder} from 'protractor';
export interface ElementDescriptor {
tag?: string;
cssClass?: string;
}
async function matches(element: ElementFinder, parentDescription: ElementDescriptor): Promise<boolean> {
const promises = [];
if (parentDescription.tag) {
promises.push(element.getTagName());
}
if (parentDescription.cssClass) {
promises.push(element.getAttribute('class'));
}
let i = 0;
const results: string[] = await Promise.all(promises);
return (!parentDescription.tag || results[i++] === parentDescription.tag)
&& (!parentDescription.cssClass || results[i++].split(' ').includes(parentDescription.cssClass));
}
export async function findParent(element: ElementFinder, parentDescription: ElementDescriptor): Promise<ElementFinder> {
let parent: ElementFinder;
do {
parent = element.element(by.xpath('..'));
} while ((await parent.getTagName()) !== 'html' && !(await matches(parent, parentDescription)));
return parent;
}

Answer 2

To click on the <input> tag whose <label> has text as Fiction and <input> tag has name as BookType you can use the following xpath :
"//label[#class='radio inline check' and contains(normalize-space(), 'Fiction')]/input[#class='input ng-new ng-valid' and #name='BookType']"

Answer 3

You have two options to do it:
To get the parent element, as you mentioned. For this you can use xpath's ancestor for it like this:
.//*[#name='BookType']/ancestor::label
To get the text as the sibling of the element with #name='BookType':
.//*[#name='BookType']/following-sibling::text()[normalize-space()]

Answer 4

In Xpath if you want parent of input you can use //input[name="BookType"]/..

Answer 5

i have framed this based on available details over the net. Please give a try.
element.all(by.css('.radio inline check')).filter(function(elem){
return elem.element(by.xpath("//*[text()[contains(.,'Fiction')]]")).getText()
}).then(function(filteredElements){
filteredElements.first().element(by.css('input[name=BookType]')).click();
});
Note: You may have some format issue in this.