1. 首先在项目中导入所需的包：

npm install @angular/cdk --save
npm install @ngrx/store --save
npm install @angular/material --save

2. 创建自定义选择器控件

创建一个名为 custom-select 的组件，并定义其 Selector，Template 和 Controller。下面是示例代码：

custom-select.component.html：

  {{label}}
  
    
      {{ option.label }}
    
  

custom-select.component.ts：

import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Option } from './option.type';

@Component({
  selector: 'custom-select',
  templateUrl: './custom-select.component.html',
  styleUrls: ['./custom-select.component.scss'],
})
export class CustomSelectComponent {
  @Input() label: string;
  @Input() options: Option[] = [];
  @Input() value: string;

  @Output() selectionChanged = new EventEmitter();

  selectEventHandler($event: any): void{
    const selectedOptionValue = $event.value;

    this.selectionChanged.emit(selectedOptionValue);
  }
}

3. 创建一个测试脚本

使用Selenium Webdriver编写一个测试脚本以测试自定义控件。下面是示例代码：

import { browser, by, element, ElementFinder } from 'protractor';

describe('Custom select control', () => {
  let customSelect: ElementFinder;
  let customSelectOptions: ElementFinder[];

  beforeEach(async () => {
    await browser.get('/');

    customSelect = element(by.css('custom-select'));
    customSelectOptions = customSelect.all(by.css('mat-option'));
  });

  it('should allow selecting options', async () => {
    await customSelect.click();

    const secondOption = customSelectOptions[1];

    await secondOption.click();

    const selectedOption = customSelect.element(by.css('.mat-select-value'));

    expect(await selected