How to use the @angular/platform-browser.By.css function in @angular/platform-browser

it('should be mutual exclusive', () => {
    const radioButtons = modelComponentFixture.debugElement.queryAll(
      By.directive(RadioButtonComponent)
    );
    radioButtons[0].query(By.css('input[type="radio"]')).nativeElement.click();

    let radioButtonChecked = modelComponentFixture.debugElement.queryAll(By.css('input:checked'));
    expect(radioButtonChecked.length).toBe(1);

    radioButtons[1].query(By.css('input[type="radio"]')).nativeElement.click();

    radioButtonChecked = modelComponentFixture.debugElement.queryAll(By.css('input:checked'));
    expect(radioButtonChecked.length).toBe(1);
  });

it('should not display the word hi that is output by the unmocked pipe, because it is now mocked', () => {
    expect(fixture.debugElement.query(By.css('#anotherExamplePipe')).nativeElement.innerHTML).toEqual('');
  });

it('should allow to override the format at component level', () => {
      component.items = [new BaseCartItem({id: 1, name: 'Test item', quantity: 1, price: 10.})];
      fixture.detectChanges();
      const item = fixture.debugElement.query(By.css('.showcase-item.default-sc-item'));
      expect(item).toBeTruthy();
      const price = item.query(By.css('.default-sc-price'));
      expect(price.nativeElement.innerText).toEqual('$10.00');
      component.localeFormat = 'EUR';
      fixture.detectChanges();
      expect(price.nativeElement.innerText).toBe('€10.00');
    });

it('should not show the "category dropdown" if "categoryValues" is set with no items', () => {
        host.placeholder = 'Search';
        host.suggestions = [{ value: 'Apple' }, { value: 'Banana' }, { value: 'Carrot' }];
        host.categories = [];
        fixture.detectChanges();

        const categoryDropdown = fixture.debugElement.queryAll(By.css('.search-input__category-dropdown'));
        expect(categoryDropdown.length).toBe(0);
    });

it('should still display the application title properly', (): void => {
      const el: HTMLElement = testContext.fixture.debugElement.query(
        By.css('.not-deployed-application-title'),
      ).nativeElement;
      expect(el.textContent.trim()).toEqual('app');
    });
  });

it('should checked if model is true', async () => {
    const opt1: CheckboxPanelComponent = modelComponent.optionSelections.toArray()[0];
    const opt2: CheckboxPanelComponent = modelComponent.optionSelections.toArray()[1];

    modelComponent.checkValue1 = true;
    modelComponentFixture.detectChanges();

    await modelComponentFixture.whenStable();

    expect(opt1.checked).toBe(true);
    expect(modelComponent.checkValue1).toBe(true);

    const element = modelComponentFixture.debugElement.queryAll(By.css('label'))[1];
    dispatchEvent(element.nativeElement, createMouseEvent('click'));
    modelComponentFixture.detectChanges();

    await modelComponentFixture.whenStable();
    expect(opt2.checked).toBe(true);
    expect(modelComponent.checkValue2).toBe(true);
  });
});

it('should load form labels correctly', () => {
        const header: DebugElement = de.query(By.css('h3'));
        const inputs: DebugElement[] = de.queryAll(By.css('span[dotmdinputtext] label'));
        const button: DebugElement = de.query(By.css('button'));

        expect(header.nativeElement.innerHTML).toEqual('Password Reset');
        expect(inputs[0].nativeElement.innerHTML).toContain('Enter Password');
        expect(inputs[1].nativeElement.innerHTML).toContain('Confirm Password');
        expect(button.nativeElement.innerHTML).toContain('Change Password');
    });

it('should display correct number of submenus', () => {
      const list: HTMLElement = nav.query(By.css('.cx-navigation__list'))
        .nativeElement;
      expect(list.childElementCount).toBe(2);
    });
  });

test(`checkbox is not disabled`, () => {
        hostComponent.disabled = false;
        fixture.detectChanges();
        expect(component.isDisabled).toEqual(false);
        const checkbox = fixture.debugElement.query(By.css('#mat-checkbox-5-input'));
        expect(checkbox.nativeElement.disabled).toEqual(false);
      });

function isExists(cls: string, stauts: boolean = true) {
    if (stauts) {
      expect(dl.query(By.css(cls))).not.toBeNull();
    } else {
      expect(dl.query(By.css(cls))).toBeNull();
    }
  }