fix: [#1683] Fix not recognizing subsequent sibling combinator in Que…

…rySelector

packages/happy-dom/src/query-selector/QuerySelector.ts

@@ -501,6 +501,15 @@ export default class QuerySelector {
 								)
 							);
 							break;
+						case SelectorCombinatorEnum.subsequentSibling:
+							let sibling = child.nextElementSibling;
+							while (sibling) {
+								matched = matched.concat(
+									this.findAll(rootElement, [sibling], selectorItems.slice(1), cachedItem, position)
+								);
+								sibling = sibling.nextElementSibling;
+							}
+							break;
 					}
 				}
 			}
@@ -570,6 +579,21 @@ export default class QuerySelector {
 								return match;
 							}
 							break;
+						case SelectorCombinatorEnum.subsequentSibling:
+							let sibling = child.nextElementSibling;
+							while (sibling) {
+								const match = this.findFirst(
+									rootElement,
+									[sibling],
+									selectorItems.slice(1),
+									cachedItem
+								);
+								if (match) {
+									return match;
+								}
+								sibling = sibling.nextElementSibling;
+							}
+							break;
 					}
 				}
 			}

packages/happy-dom/src/query-selector/SelectorCombinatorEnum.ts

@@ -1,7 +1,8 @@
 enum SelectorCombinatorEnum {
 	descendant = 'descendant',
 	child = 'child',
-	adjacentSibling = 'adjacentSibling'
+	adjacentSibling = 'adjacentSibling',
+	subsequentSibling = 'subsequentSibling'
 }
 
 export default SelectorCombinatorEnum;

packages/happy-dom/src/query-selector/SelectorParser.ts

@@ -25,7 +25,7 @@ import ISelectorPseudo from './ISelectorPseudo.js';
  * Group 17: Combinator.
  */
 const SELECTOR_REGEXP =
-	/(\*)|([a-zA-Z0-9-]+)|#((?:[a-zA-Z0-9-_]|\\.)+)|\.((?:[a-zA-Z0-9-_]|\\.)+)|\[([a-zA-Z0-9-_\\:]+)\]|\[([a-zA-Z0-9-_\\:]+)\s*([~|^$*]{0,1})\s*=\s*["']{1}([^"']*)["']{1}\s*(s|i){0,1}\]|\[([a-zA-Z0-9-_]+)\s*([~|^$*]{0,1})\s*=\s*([^\]]*)\]|:([a-zA-Z-]+)\s*\(([^)]+)\){0,1}|:([a-zA-Z-]+)|::([a-zA-Z-]+)|([\s,+>]*)/gm;
+	/(\*)|([a-zA-Z0-9-]+)|#((?:[a-zA-Z0-9-_]|\\.)+)|\.((?:[a-zA-Z0-9-_]|\\.)+)|\[([a-zA-Z0-9-_\\:]+)\]|\[([a-zA-Z0-9-_\\:]+)\s*([~|^$*]{0,1})\s*=\s*["']{1}([^"']*)["']{1}\s*(s|i){0,1}\]|\[([a-zA-Z0-9-_]+)\s*([~|^$*]{0,1})\s*=\s*([^\]]*)\]|:([a-zA-Z-]+)\s*\(([^)]+)\){0,1}|:([a-zA-Z-]+)|::([a-zA-Z-]+)|([\s,+>~]*)/gm;
 
 /**
  * Escaped Character RegExp.
@@ -193,6 +193,13 @@ export default class SelectorParser {
 							});
 							currentGroup.push(currentSelectorItem);
 							break;
+						case '~':
+							currentSelectorItem = new SelectorItem({
+								combinator: SelectorCombinatorEnum.subsequentSibling,
+								ignoreErrors
+							});
+							currentGroup.push(currentSelectorItem);
+							break;
 						case '':
 							currentSelectorItem = new SelectorItem({
 								combinator: SelectorCombinatorEnum.descendant,

packages/happy-dom/test/query-selector/QuerySelector.test.ts

@@ -386,6 +386,29 @@ describe('QuerySelector', () => {
 			expect(firstDivC === null).toBe(true);
 		});
 
+		it('subsequentSibling combinator should select subsequent siblings', () => {
+			const div = document.createElement('div');
+
+			div.innerHTML = `
+				<div class="a">a1</div>
+				<div class="b">b1</div>
+				<div class="c">c1</div>
+				<div class="a">a2</div>
+				<div class="b">b2</div>
+				<div class="a">a3</div>
+			`;
+			const firstDivB = div.querySelector('.a ~ .b');
+			const secondChildren = div.children[1];
+
+			expect(secondChildren === firstDivB).toBe(true);
+			expect(firstDivB?.textContent).toBe('b1');
+
+			const allSubsequentSiblingsA = QuerySelector.querySelectorAll(div, '.a ~ .a');
+			expect(allSubsequentSiblingsA.length).toBe(2);
+			expect(allSubsequentSiblingsA[0].textContent).toBe('a2');
+			expect(allSubsequentSiblingsA[1].textContent).toBe('a3');
+		});
+
 		it('Returns all elements with matching attributes using "[attr1="value1"]".', () => {
 			const container = document.createElement('div');
 			container.innerHTML = QuerySelectorHTML;