Remove looping from People Page

[Alister Scott]

In our people page we have the two functions below.

We should be able to add some data-e2e- attributes in wp-calypso to avoid doing any looping and directly find the element using a css selector for the data attribute.

	async viewerDisplayed( username ) {
		let viewers = await this.driver.findElements(
			By.css( '.people-list-item .people-profile__username' )
		);

		for ( let i = 0; i < viewers.length; i++ ) {
			let viewer = await viewers[ i ].getText();
			if ( viewer === username ) {
				return true;
			}
		}
		return false;
	}

	/**
	 * Removes the given user from the currently displayed list
	 * @param {string} username The username to remove
	 * @returns {Object} Returns `object`.
	 */
	async removeUserByName( username ) {
		let viewers = await this.driver.findElements( By.css( '.people-list-item' ) );

		for ( let i = 0; i < viewers.length; i++ ) {
			let viewer = await viewers[ i ]
				.findElement( By.css( '.people-profile__username' ) )
				.getText();
			if ( viewer === username ) {
				await viewers[ i ].findElement( By.css( '.people-list-item__remove-button' ) ).click();
				return await DriverHelper.clickWhenClickable(
					this.driver,
					By.css( '.dialog button.is-primary' )
				);
			}
		}
		throw new Error( `The username '${ username }' is not displayed as a viewer to remove` );
	}